/* لماذا تختارنا */
.omsnptxfrj {
    /* كل ألوان السيكشن مركزية هنا ومبنية من متغيّرات الجذر الثلاثة */

    /* تدرّج سطح الكارد: غامق عند الطرفين، أفتح قليلًا في المنتصف */
    --ptcardedge: color-mix(in srgb, var(--primary) 5%, var(--helper));
    --ptcardmid: color-mix(in srgb, var(--primary) 30%, var(--helper));

    /* تدرّج سطح الكارد كقيمة واحدة لإعادة استخدامها في الحواف الركنية */
    --ptcardsurface: linear-gradient(90deg,
        var(--ptcardedge) 0%,
        var(--ptcardmid) 50%,
        var(--ptcardedge) 100%);

    /* تدرّج الرقم: فاتح أعلى ← غامق أسفل، مستقل تمامًا عن تدرّج الكارد */
    --ptnumtop: color-mix(in srgb, var(--primary) 32%, var(--secondary));
    --ptnummid: var(--primary);
    --ptnumbot: color-mix(in srgb, var(--primary) 44%, var(--helper));

    /* الحواف الركنية السميكة */
    --ptaccent: var(--primary);

    /* نقاط الحد المنقّط */
    --ptdot: color-mix(in srgb, var(--primary) 62%, transparent);

    /* النصوص */
    --pttitle: color-mix(in srgb, var(--secondary) 88%, var(--primary));
    --ptdesc: rgba(255, 255, 255, .56);
    --ptlede: rgba(255, 255, 255, .58);

    /* الأيقونة */
    --pticon: color-mix(in srgb, var(--secondary) 80%, var(--primary));

    /* الظل */
    --ptshadow: rgba(0, 0, 0, .55);

    --ptradius: 13px;

    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--helper);
    padding-block: clamp(2.6em, 7vw, 4em);
    overflow-x: clip;
}

    /* الحاوية الداخلية */
    .omsnptxfrjinner {
        width: calc(100% - 2em);
        max-width: var(--maxwidth);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.4em;
    }

    /* عنوان السيكشن */
    .omsnptxfrjhead {
        color: var(--secondary);
        font-size: clamp(1.5rem, 1.15rem + 1.7vw, 2.05rem);
        font-weight: 800;
        line-height: 1.4;
        text-align: center;
    }

    /* جملة الافتتاح */
    .omsnptxfrjlede {
        max-width: 58ch;
        color: var(--ptlede);
        font-size: clamp(.95rem, .9rem + .3vw, 1.05rem);
        font-weight: 500;
        line-height: 1.9;
        text-align: center;
    }

    /* شبكة النقاط */
    .omsnptxfrjlist {
        counter-reset: ptc;
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        gap: 1.4em;
        margin-top: .6em;
    }

    /* الكارد */
    .omsnptxfrjcard {
        counter-increment: ptc;
        position: relative;
        display: flex;
        flex-direction: column;
        direction: ltr;
        gap: .75em;
        min-height: 9rem;
        padding: clamp(1.3em, 3.6vw, 1.6em) clamp(1.4em, 4vw, 1.75em);
        border-radius: var(--ptradius);

        /* الحد المنقّط على كامل المحيط + سطح الكارد المتدرّج (طبقات خلفية متعددة) */
        background-image:
            radial-gradient(circle, var(--ptdot) 0 1px, transparent 1.6px),
            radial-gradient(circle, var(--ptdot) 0 1px, transparent 1.6px),
            radial-gradient(circle, var(--ptdot) 0 1px, transparent 1.6px),
            radial-gradient(circle, var(--ptdot) 0 1px, transparent 1.6px),
            var(--ptcardsurface);
        background-repeat: repeat-x, repeat-x, repeat-y, repeat-y, no-repeat;
        background-size:
            12px 2px,
            12px 2px,
            2px 12px,
            2px 12px,
            100% 100%;
        background-position:
            10px 6px,
            10px calc(100% - 6px),
            6px 10px,
            calc(100% - 6px) 10px,
            0 0;

        box-shadow:
            0 2px 6px rgba(0, 0, 0, .4),
            0 10px 26px -6px var(--ptshadow),
            0 4px 12px -6px rgba(0, 0, 0, .5);
    }

        /* الحافة الركنية السميكة — أعلى اليمين (تتبع انحناء الكارد ولا تلتف حوله).
           تُملأ بنفس تدرّج سطح الكارد ممدَّدًا لعرض الكارد كامل ومثبَّتًا لليمين،
           فتخفي نقاط هذا الركن وتذوب في السطح بلا أي فرق لوني */
        .omsnptxfrjcard::before {
            content: "";
            position: absolute;
            top: 0;
            right: 0;
            width: 36%;
            height: 44%;
            border: 4px solid var(--ptaccent);
            border-left: 0;
            border-bottom: 0;
            border-radius: 0 var(--ptradius) 0 0;
            background-image: var(--ptcardsurface);
            background-size: 278% 100%;
            background-position: right center;
            background-repeat: no-repeat;
            pointer-events: none;
        }

        /* الحافة الركنية السميكة — أسفل اليسار */
        .omsnptxfrjcard::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            width: 36%;
            height: 44%;
            border: 4px solid var(--ptaccent);
            border-right: 0;
            border-top: 0;
            border-radius: 0 0 0 var(--ptradius);
            background-image: var(--ptcardsurface);
            background-size: 278% 100%;
            background-position: left center;
            background-repeat: no-repeat;
            pointer-events: none;
        }

        /* الصف الأول: الرقم + العنوان — flex بمحاذاة البداية */
        .omsnptxfrjr1 {
            position: relative;
            z-index: 1;
            display: flex;
            align-items: flex-start;
            gap: clamp(.7em, 2.5vw, 1.05em);
        }

        /* الصف الثاني: الأيقونة + الشرح — flex بمحاذاة البداية */
        .omsnptxfrjr2 {
            position: relative;
            z-index: 1;
            display: flex;
            align-items: flex-start;
            gap: .7em;
        }

        /* الرقم — تدرّج عمودي مستقل عبر background-clip: text */
        .omsnptxfrjnum {
            flex-shrink: 0;
            font-size: clamp(2.5rem, 1.9rem + 3.1vw, 3.4rem);
            font-weight: 800;
            line-height: .9;
            letter-spacing: -.02em;
            background-image: linear-gradient(180deg,
                var(--ptnumtop) 0%,
                var(--ptnummid) 48%,
                var(--ptnumbot) 100%);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            color: transparent;
        }

        .omsnptxfrjnum::before {
            content: counter(ptc, decimal-leading-zero);
        }

        /* العنوان */
        .omsnptxfrjtitle {
            flex: 1;
            min-width: 0;
            direction: rtl;
            color: var(--pttitle);
            font-size: clamp(1.05rem, .95rem + .6vw, 1.3rem);
            font-weight: 700;
            line-height: 1.5;
        }

        /* الشرح */
        .omsnptxfrjdesc {
            flex: 1;
            min-width: 0;
            direction: rtl;
            color: var(--ptdesc);
            font-size: clamp(.86rem, .82rem + .25vw, .95rem);
            font-weight: 400;
            line-height: 1.75;
        }

        /* الأيقونة — على يسار الشرح، بمحاذاة بدايته (flex-start) */
        .omsnptxfrjicon {
            flex-shrink: 0;
            width: clamp(30px, 8vw, 38px);
            height: clamp(30px, 8vw, 38px);
            margin-top: .2em;
        }

        .omsnptxfrjiconsvg {
            display: block;
            width: 100%;
            height: 100%;
            fill: var(--pticon);
        }

/* حركة الظهور */
html.js .omsnptxfrjcard.omsnreveal {
    opacity: 0;
}

html.js .omsnptxfrjcard.omsnreveal.omsnvisible {
    opacity: 1;
    transition: opacity .5s ease;
}

@media (prefers-reduced-motion: reduce) {

    html.js .omsnptxfrjcard.omsnreveal {
        opacity: 1;
        transition: none;
    }

}

/* الاستجابة */
@media (min-width: 820px) {

    .omsnptxfrjlist {
        grid-template-columns: 1fr 1fr;
        gap: 1.6em;
    }

}

@media (max-width: 560px) {

    /* الكارد */
    .omsnptxfrjcard {
        min-height: 8rem;
    }

    /* الصف الأول */
    .omsnptxfrjr1 {
        gap: .7em;
    }

    /* الرقم */
    .omsnptxfrjnum {
        font-size: 2.1rem;
    }

    /* العنوان */
    .omsnptxfrjtitle {
        font-size: 1.02rem;
        line-height: 1.45;
    }

    /* الأيقونة */
    .omsnptxfrjicon {
        width: 26px;
        height: 26px;
    }

}


/* الخطوات */
.omsnpttxfrj {
    /* كل ألوان السيكشن مركزية ومبنية من متغيّرات الجذر الثلاثة */

    /* الكارد */
    --pttcarddark: color-mix(in srgb, var(--primary) 4%, var(--helper));
    --pttcardmid: color-mix(in srgb, var(--primary) 9%, var(--helper));
    --pttborder: color-mix(in srgb, var(--primary) 20%, var(--helper));

    /* الخط النيون: النواة أسطع من التوهج المحيط بها */
    --pttcore: var(--primary);
    --pttbright: color-mix(in srgb, var(--primary) 60%, var(--secondary));
    --pttglow: color-mix(in srgb, var(--primary) 46%, transparent);
    --pttglowsoft: color-mix(in srgb, var(--primary) 72%, transparent);

    /* النصوص والأيقونة والرقم */
    --ptticon: color-mix(in srgb, var(--primary) 86%, var(--secondary));
    --ptttitle: color-mix(in srgb, var(--secondary) 92%, var(--primary));
    --pttdesc: rgba(255, 255, 255, .62);
    --pttnum: color-mix(in srgb, var(--secondary) 84%, var(--primary));
    --pttlede: rgba(255, 255, 255, .6);

    --pttshadow: rgba(0, 0, 0, .6);

    /* أبعاد نظام المسافات */
    --pttnode: clamp(44px, 12vw, 54px);
    --pttconn: clamp(20px, 5vw, 28px);
    --pttlane: calc(var(--pttnode) + var(--pttconn) + .4rem);
    --pttcorew: 3px;
    --pttdot: 7px;
    --pttcut: 13px;
    --pttnodetop: 16px;
    --pttgap: clamp(2em, 5vw, 2.8em);

    --pttoct: polygon(
        var(--pttcut) 0%, calc(100% - var(--pttcut)) 0%,
        100% var(--pttcut), 100% calc(100% - var(--pttcut)),
        calc(100% - var(--pttcut)) 100%, var(--pttcut) 100%,
        0% calc(100% - var(--pttcut)), 0% var(--pttcut));

    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--helper);
    padding-block: clamp(3em, 8vw, 5em);
    overflow-x: clip;
}

    /* الحاوية الداخلية */
    .omsnpttxfrjinner {
        width: calc(100% - 2em);
        max-width: var(--maxwidth);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.4em;
    }

    /* عنوان السيكشن */
    .omsnpttxfrjhead {
        color: var(--secondary);
        font-size: clamp(1.5rem, 1.15rem + 1.7vw, 2.05rem);
        font-weight: 800;
        line-height: 1.4;
        text-align: center;
    }

    /* جملة الافتتاح */
    .omsnpttxfrjlede {
        max-width: 60ch;
        color: var(--pttlede);
        font-size: clamp(.95rem, .9rem + .3vw, 1.05rem);
        font-weight: 500;
        line-height: 1.9;
        text-align: center;
    }

    /* قائمة الخطوات — العمود النيون على اليمين */
    .omsnpttxfrjlist {
        counter-reset: pttc;
        position: relative;
        width: 100%;
        max-width: 640px;
        margin-top: 1em;
    }

        /* نواة العمود: خط حاد رفيع شديد السطوع + طبقات توهج ضيقة */
        .omsnpttxfrjlist::before {
            content: "";
            position: absolute;
            top: -16px;
            bottom: -16px;
            right: calc(var(--pttnode) / 2 - var(--pttcorew) / 2);
            width: var(--pttcorew);
            border-radius: var(--pttcorew);
            background: linear-gradient(180deg,
                transparent 0%,
                var(--pttcore) 3%,
                var(--pttbright) 50%,
                var(--pttcore) 97%,
                transparent 100%);
            box-shadow:
                0 0 2px var(--pttbright),
                0 0 6px var(--pttcore),
                0 0 14px var(--pttglow),
                0 0 30px var(--pttglowsoft);
            z-index: 0;
        }

        /* توهج العمود الواسع الناعم — blur على طبقة منفصلة كي تبقى النواة حادّة */
        .omsnpttxfrjlist::after {
            content: "";
            position: absolute;
            top: -34px;
            bottom: -34px;
            right: calc(var(--pttnode) / 2 - 5px);
            width: 10px;
            background: var(--primary);
            filter: blur(9px);
            opacity: .4;
            z-index: 0;
        }

    /* الخطوة */
    .omsnpttxfrjstep {
        counter-increment: pttc;
        position: relative;
        padding-right: var(--pttlane);
        margin-bottom: var(--pttgap);
    }

    .omsnpttxfrjstep:last-child {
        margin-bottom: 0;
    }

        /* التفاف الخط حول الدائرة: قوس مضيء على جهة العمود، مفتوح نحو الكارد،
           يُرسم قبل الدائرة فتغطّي الدائرة وسطه ويبقى الجزء البارز + توهجه */
        .omsnpttxfrjstep::before {
            content: "";
            position: absolute;
            top: calc(var(--pttnodetop) - 5px);
            right: -5px;
            width: calc(var(--pttnode) + 10px);
            height: calc(var(--pttnode) + 10px);
            border-radius: 50%;
            border: 2px solid var(--pttbright);
            border-left-color: transparent;
            box-shadow: 0 0 6px var(--pttcore), 0 0 15px var(--pttglow);
            z-index: 0;
        }

        /* دائرة الرقم — طبقات: داخل داكن، حلقة حادّة، توهج داخلي، توهج خارجي، هالة */
        .omsnpttxfrjnode {
            position: absolute;
            top: var(--pttnodetop);
            right: 0;
            width: var(--pttnode);
            height: var(--pttnode);
            display: grid;
            place-items: center;
            border-radius: 50%;
            border: 2px solid var(--pttbright);
            background: radial-gradient(circle at 50% 42%,
                color-mix(in srgb, var(--primary) 13%, var(--helper)) 0%,
                var(--helper) 72%);
            box-shadow:
                inset 0 0 9px color-mix(in srgb, var(--primary) 45%, transparent),
                0 0 3px var(--pttbright),
                0 0 11px var(--pttcore),
                0 0 24px var(--pttglow),
                0 0 44px var(--pttglowsoft);
        }

        /* الرقم */
        .omsnpttxfrjnum {
            color: var(--pttnum);
            font-size: calc(var(--pttnode) * .34);
            font-weight: 800;
            line-height: 1;
            letter-spacing: .02em;
        }

        .omsnpttxfrjnum::before {
            content: counter(pttc, decimal-leading-zero);
        }

        /* الموصل الأفقي من الدائرة نحو الكارد (يسارًا) + نقطة مضيئة في نهايته */
        .omsnpttxfrjconn {
            position: absolute;
            top: calc(var(--pttnodetop) + var(--pttnode) / 2 - 1px);
            right: calc(var(--pttnode) - 3px);
            width: var(--pttconn);
            height: 2px;
            background: linear-gradient(to left,
                var(--pttbright),
                color-mix(in srgb, var(--primary) 62%, transparent));
            box-shadow: 0 0 3px var(--pttcore), 0 0 8px var(--pttglow);
        }

        .omsnpttxfrjconn::after {
            content: "";
            position: absolute;
            left: calc(var(--pttdot) / -2);
            top: 50%;
            width: var(--pttdot);
            height: var(--pttdot);
            border-radius: 50%;
            background: var(--pttbright);
            box-shadow: 0 0 4px var(--pttcore), 0 0 10px var(--pttglow);
            transform: translateY(-50%);
        }

        /* الكارد — طبقة الحد تحت السطح، بزوايا مقطوعة chamfer فعلية */
        .omsnpttxfrjcard {
            position: relative;
            padding: clamp(1.1rem, 3.4vw, 1.5rem) clamp(1.2rem, 4vw, 1.6rem);
            background: var(--pttborder);
            clip-path: var(--pttoct);
            filter:
                drop-shadow(0 5px 13px var(--pttshadow))
                drop-shadow(0 2px 4px rgba(0, 0, 0, .55))
                drop-shadow(0 0 2px color-mix(in srgb, var(--primary) 26%, transparent));
        }

        /* سطح الكارد الداكن (تدرّج داخلي خفيف جدًا) داخل إطار الحد */
        .omsnpttxfrjcard::before {
            content: "";
            position: absolute;
            inset: 1.4px;
            clip-path: var(--pttoct);
            background: linear-gradient(158deg,
                var(--pttcardmid) 0%,
                var(--pttcarddark) 58%,
                var(--pttcarddark) 100%);
            z-index: 0;
        }

        /* أكسنت برتقالي في الركن السفلي الأيمن فقط، موازٍ لقطع الزاوية (يُقصّه clip-path
           على حافة الـchamfer فيبدو جزءًا من الحافة لا خطًّا منفصلًا) */
        .omsnpttxfrjcard::after {
            content: "";
            position: absolute;
            right: -1px;
            bottom: calc(var(--pttcut) - 3px);
            width: calc(var(--pttcut) * 1.9);
            height: 3px;
            border-radius: 2px;
            background: linear-gradient(90deg,
                color-mix(in srgb, var(--primary) 52%, var(--helper)),
                var(--pttbright));
            box-shadow: 0 0 4px var(--pttbright), 0 0 9px var(--pttglow);
            transform-origin: right center;
            transform: rotate(45deg);
            z-index: 2;
        }

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

        /* الصف الأول: الأيقونة + العنوان — flex بمحاذاة البداية */
        .omsnpttxfrjrow {
            display: flex;
            align-items: flex-start;
            gap: .65rem;
            direction: rtl;
        }

        /* الأيقونة — SVG نيون برتقالي بتوهج خفيف */
        .omsnpttxfrjicon {
            flex-shrink: 0;
            width: clamp(24px, 6vw, 27px);
            height: clamp(24px, 6vw, 27px);
            margin-top: .1em;
            color: var(--ptticon);
            filter: drop-shadow(0 0 3px color-mix(in srgb, var(--primary) 48%, transparent));
        }

        .omsnpttxfrjiconsvg {
            display: block;
            width: 100%;
            height: 100%;
        }

        /* العنوان */
        .omsnpttxfrjtitle {
            direction: rtl;
            color: var(--ptttitle);
            font-size: clamp(1.05rem, .92rem + .6vw, 1.25rem);
            font-weight: 800;
            line-height: 1.4;
        }

        /* الشرح — صف مستقل تحت الصف الأول */
        .omsnpttxfrjdesc {
            direction: rtl;
            margin-top: .7rem;
            color: var(--pttdesc);
            font-size: clamp(.86rem, .82rem + .25vw, .95rem);
            font-weight: 400;
            line-height: 1.75;
        }

/* حركة الظهور */
html.js .omsnpttxfrjstep.omsnreveal {
    opacity: 0;
}

html.js .omsnpttxfrjstep.omsnreveal.omsnvisible {
    opacity: 1;
    transition: opacity .5s ease;
}

@media (prefers-reduced-motion: reduce) {

    html.js .omsnpttxfrjstep.omsnreveal {
        opacity: 1;
        transition: none;
    }

}

/* الاستجابة */
@media (max-width: 560px) {

    .omsnpttxfrj {
        --pttnodetop: 12px;
        --pttgap: 1.9em;
    }

    /* الكارد */
    .omsnpttxfrjcard {
        padding: 1.05rem 1.1rem;
    }

    /* العنوان */
    .omsnpttxfrjtitle {
        font-size: 1.02rem;
    }

}


/* الأسئلة الشائعة */
.omsnfqxfrj {
    /* كل الألوان مركزية ومشتقّة من متغيّرات الجذر الثلاثة */
    --fqcardbg: color-mix(in srgb, var(--secondary) 3%, var(--helper));
    --fqcardborder: rgba(255, 255, 255, .07);
    --fqcardborderhover: rgba(255, 255, 255, .13);
    --fqiconborder: rgba(255, 255, 255, .09);
    --fqiconbg: linear-gradient(150deg,
        color-mix(in srgb, var(--primary) 10%, var(--helper)),
        var(--helper) 78%);
    --fqicongrad: linear-gradient(150deg,
        color-mix(in srgb, var(--primary) 55%, var(--secondary)) 0%,
        var(--primary) 52%,
        color-mix(in srgb, var(--primary) 72%, var(--helper)) 100%);
    --fqquestion: var(--secondary);
    --fqanswer: rgba(255, 255, 255, .64);
    --fqchev: rgba(255, 255, 255, .5);
    --fqshadow: rgba(0, 0, 0, .5);
    --fqradius: 8px;

    --fqpadx: clamp(1em, 3.5vw, 1.35em);
    --fqpady: clamp(1em, 3vw, 1.15em);
    --fqiconsize: 2em;
    --fqgap: .7em;
    --fqindent: calc(var(--fqiconsize) + var(--fqgap));

    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--helper);
    padding-block: clamp(3em, 8vw, 4.5em);
    overflow-x: clip;
}

    /* الحاوية الداخلية */
    .omsnfqxfrjinner {
        width: calc(100% - 2em);
        max-width: 760px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.1em;
    }

    /* عنوان السيكشن */
    .omsnfqxfrjhead {
        color: var(--secondary);
        font-size: clamp(1.5rem, 1.15rem + 1.7vw, 2.05rem);
        font-weight: 800;
        line-height: 1.4;
        text-align: center;
    }

    /* جملة التمهيد */
    .omsnfqxfrjlede {
        max-width: 56ch;
        color: rgba(255, 255, 255, .55);
        font-size: clamp(.95rem, .9rem + .3vw, 1.05rem);
        font-weight: 500;
        line-height: 1.9;
        text-align: center;
        margin-bottom: .4em;
    }

    /* قائمة الأسئلة */
    .omsnfqxfrjlist {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: .7em;
    }

    /* الكارد — قريب جدًا من لون الخلفية، حد رفيع جدًا، ظل خافت جدًا */
    .omsnfqxfrjitem {
        background-color: var(--fqcardbg);
        border: 1px solid var(--fqcardborder);
        border-radius: var(--fqradius);
        box-shadow:
            0 1px 2px rgba(0, 0, 0, .4),
            0 8px 18px -10px var(--fqshadow);
        transition: border-color .25s ease;
    }

    .omsnfqxfrjitem:hover {
        border-color: var(--fqcardborderhover);
    }

        /* عنوان السؤال (h3 حاوٍ للزر فقط) */
        .omsnfqxfrjqh {
            margin: 0;
            font: inherit;
        }

        /* صف السؤال — الزر كامل العرض وقابل للضغط بالكامل */
        .omsnfqxfrjq {
            width: 100%;
            display: flex;
            align-items: flex-start;
            gap: var(--fqgap);
            padding: var(--fqpady) var(--fqpadx);
            background: none;
            border: 0;
            border-radius: inherit;
            font: inherit;
            color: inherit;
            text-align: start;
            direction: rtl;
            cursor: pointer;
        }

        /* حاوية الأيقونة — على اليمين، حد شديد الرقة، خلفية داكنة، توهج خفيف جدًا */
        .omsnfqxfrjicon {
            flex-shrink: 0;
            width: var(--fqiconsize);
            height: var(--fqiconsize);
            margin-top: .06em;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: 1px solid var(--fqiconborder);
            border-radius: 6px;
            background-image: var(--fqiconbg);
            box-shadow:
                inset 0 0 8px rgba(0, 0, 0, .45),
                0 0 8px -3px color-mix(in srgb, var(--primary) 30%, transparent);
        }

        /* أيقونة السؤال (Font Awesome) بتدرّج خطي من ألوان الهوية */
        .omsnfqxfrjicon i {
            font-size: .95em;
            line-height: 1;
            background-image: var(--fqicongrad);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            color: transparent;
        }

        /* نص السؤال — أبيض، أكبر من الإجابة، يملأ المسافة فيدفع الـchevron لأقصى اليسار */
        .omsnfqxfrjqtext {
            flex: 1;
            min-width: 0;
            color: var(--fqquestion);
            font-size: clamp(.98rem, .9rem + .4vw, 1.1rem);
            font-weight: 600;
            line-height: 1.55;
        }

        /* Chevron — أقصى اليسار، صغير، رمادي فاتح، يدور عند الفتح */
        .omsnfqxfrjchev {
            flex-shrink: 0;
            margin-top: .28em;
            font-size: .82em;
            color: var(--fqchev);
            transition: transform .3s ease;
        }

        .omsnfqxfrjitem.omsnfqxfrjopen .omsnfqxfrjchev {
            transform: rotate(180deg);
        }

        /* الإجابة — مخفية عند التحميل، تُفتح بسلاسة عبر grid-template-rows */
        .omsnfqxfrja {
            display: grid;
            grid-template-rows: 0fr;
            transition: grid-template-rows .3s ease;
        }

        .omsnfqxfrjitem.omsnfqxfrjopen .omsnfqxfrja {
            grid-template-rows: 1fr;
        }

        .omsnfqxfrjainner {
            min-height: 0;
            overflow: hidden;
            opacity: 0;
            transition: opacity .25s ease;
        }

        .omsnfqxfrjitem.omsnfqxfrjopen .omsnfqxfrjainner {
            opacity: 1;
        }

        /* نص الإجابة — أبيض مائل للخفوت، أصغر وأخف من السؤال، مُزاح ليحاذي نص السؤال */
        .omsnfqxfrjainner p {
            margin: 0;
            padding-block: 0 var(--fqpady);
            padding-inline-start: calc(var(--fqpadx) + var(--fqindent));
            padding-inline-end: var(--fqpadx);
            color: var(--fqanswer);
            font-size: clamp(.88rem, .84rem + .2vw, .96rem);
            font-weight: 400;
            line-height: 1.8;
            direction: rtl;
            text-align: start;
        }

/* حركة الظهور */
html.js .omsnfqxfrjitem.omsnreveal {
    opacity: 0;
}

html.js .omsnfqxfrjitem.omsnreveal.omsnvisible {
    opacity: 1;
    transition: opacity .5s ease;
}

@media (prefers-reduced-motion: reduce) {

    html.js .omsnfqxfrjitem.omsnreveal {
        opacity: 1;
        transition: none;
    }

    .omsnfqxfrja,
    .omsnfqxfrjainner,
    .omsnfqxfrjchev {
        transition: none;
    }

}

/* الاستجابة */
@media (max-width: 560px) {

    .omsnfqxfrj {
        --fqpadx: 1em;
        --fqpady: .95em;
        --fqiconsize: 1.9em;
        --fqgap: .6em;
    }

    .omsnfqxfrjqtext {
        font-size: 1rem;
    }

}


/* تواصل معنا */
.omsncixfrj {
    /* كل الألوان مركزية ومشتقّة من متغيّرات الجذر الثلاثة */
    --cisurface: #151515;             /* سطح السيكشن المرتفع فوق الأسود — رُفِع ليبرز أكثر */
    --cicardhover: #1c1c1c;           /* الكارد عند المرور */
    --ciwell: #0b0b0b;                /* حفرة حاوية الأيقونة */
    --cidark: rgba(0, 0, 0, .82);     /* ظل النيومورفيزم الداكن */
    --cilight: rgba(255, 255, 255, .045); /* اللمعة الخفيفة */
    --cidivider: rgba(255, 255, 255, .07);
    --cititle: rgba(255, 255, 255, .93);
    --citext: rgba(255, 255, 255, .48);

    --ciradius: 22px;
    --cicardradius: 16px;
    --ciwellradius: 14px;

    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--helper);
    /* مسافة علوية قليلة + سحب السيكشن لأعلى لتقليل الفراغ عن سيكشن الخطوات */
    margin-top: calc(-1 * clamp(3em, 8vw, 6em));
    padding-block: clamp(.8em, 2.5vw, 1.4em) clamp(3em, 8vw, 5em);
    overflow-x: clip;
}

    /* السطح الأسود المرتفع — بروز أوضح عبر تباين سطح أعلى + لمعة أقوى + ظل داكن أعمق */
    .omsncixfrjinner {
        width: calc(100% - 2em);
        max-width: 1060px;
        padding: clamp(2em, 5vw, 3em) clamp(1.4em, 4vw, 2.6em);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.5em;
        background-color: var(--cisurface);
        border: 1px solid rgba(255, 255, 255, .055);
        border-radius: var(--ciradius);
        box-shadow:
            /* عمق داكن ناعم واسع وأعمق */
            0 28px 60px -12px rgba(0, 0, 0, .9),
            0 12px 30px -8px rgba(0, 0, 0, .7),
            26px 30px 70px rgba(0, 0, 0, .55),
            /* لمعة علوية-يسارية أقوى = إحساس الارتفاع */
            -16px -18px 50px rgba(255, 255, 255, .035),
            /* انتشار خفيف حول كامل المحيط لفصله عن الأسود */
            0 0 0 1px rgba(255, 255, 255, .02),
            /* خطّا الحافة الداخلية: لمعة أعلى، ظل أسفل */
            inset 0 1px 0 rgba(255, 255, 255, .07),
            inset 0 -2px 3px rgba(0, 0, 0, .7);
    }

    /* عنوان السيكشن — يبدو محفورًا في السطح الأسود (طبقتان متعاكستان خفيفتان) */
    .omsncixfrjhead {
        color: var(--cititle);
        font-size: clamp(1.5rem, 1.15rem + 1.7vw, 2.1rem);
        font-weight: 800;
        line-height: 1.3;
        letter-spacing: .01em;
        text-align: center;
        text-shadow:
            0 -1px 1px rgba(0, 0, 0, .6),
            0 1px 0 rgba(255, 255, 255, .05);
    }

    /* جملة التمهيد */
    .omsncixfrjlede {
        max-width: 50ch;
        margin-top: -.5em;
        color: var(--citext);
        font-size: clamp(.9rem, .86rem + .3vw, 1rem);
        font-weight: 500;
        line-height: 1.85;
        text-align: center;
    }

    /* شبكة الكاردات الثلاثة — فراغ بينها لأن كل كارد بلاطة مرفوعة قائمة بذاتها */
    .omsncixfrjgrid {
        width: 100%;
        margin-top: .4em;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: clamp(.9em, 2.4vw, 1.4em);
        direction: rtl;
    }

        /* الكارد — رابط كامل. الحالة الأساسية = بلاطة مرفوعة نيومورفيك (كانت سابقًا حالة hover) */
        .omsncixfrjcard {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            gap: .85em;
            padding: clamp(1.6em, 3.8vw, 2.2em) clamp(1em, 3vw, 1.6em);
            border-radius: var(--cicardradius);
            color: inherit;
            text-decoration: none;
            background-color: var(--cicardhover);
            border: 1px solid rgba(255, 255, 255, .04);
            box-shadow:
                9px 11px 24px rgba(0, 0, 0, .6),
                -7px -9px 20px rgba(255, 255, 255, .025),
                inset 0 1px 0 rgba(255, 255, 255, .045),
                inset 0 -1px 1px rgba(0, 0, 0, .5);
            transition: background-color .28s ease, box-shadow .28s ease;
        }

        /* عند المرور: تأثير مختلف تمامًا — البلاطة تنضغط داخل السطح (raised ← pressed) */
        .omsncixfrjcard:hover,
        .omsncixfrjcard:focus-visible {
            background-color: var(--cisurface);
            box-shadow:
                inset 6px 7px 15px rgba(0, 0, 0, .72),
                inset -5px -6px 13px rgba(255, 255, 255, .02),
                2px 3px 9px rgba(0, 0, 0, .4);
        }

        /* حاوية الأيقونة — محفورة داخل الكارد عبر inset shadow */
        .omsncixfrjicon {
            width: clamp(3em, 9vw, 3.5em);
            height: clamp(3em, 9vw, 3.5em);
            display: grid;
            place-items: center;
            border-radius: var(--ciwellradius);
            background-color: var(--ciwell);
            border: 1px solid rgba(0, 0, 0, .45);
            box-shadow:
                inset 5px 5px 11px rgba(0, 0, 0, .82),
                inset -4px -4px 10px rgba(255, 255, 255, .035),
                0 1px 0 rgba(255, 255, 255, .022);
            transition: box-shadow .28s ease;
        }

        /* عند المرور: تعمّق الحفرة أكثر مع انضغاط الكارد */
        .omsncixfrjcard:hover .omsncixfrjicon,
        .omsncixfrjcard:focus-visible .omsncixfrjicon {
            box-shadow:
                inset 6px 7px 14px rgba(0, 0, 0, .92),
                inset -4px -4px 11px rgba(255, 255, 255, .045),
                0 1px 0 rgba(255, 255, 255, .02);
        }

        /* الأيقونة — برتقالية بتدرّج خفيف من ألوان الهوية (واتساب برتقالي أيضًا) */
        .omsncixfrjicon i {
            font-size: clamp(1.15rem, 1rem + .55vw, 1.45rem);
            line-height: 1;
            background-image: linear-gradient(155deg,
                color-mix(in srgb, var(--primary) 60%, var(--secondary)) 0%,
                var(--primary) 52%,
                color-mix(in srgb, var(--primary) 78%, var(--helper)) 100%);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            color: transparent;
            transition: filter .28s ease;
        }

        /* عند المرور: تفتّح الأيقونة قليلًا كإشارة تفاعل */
        .omsncixfrjcard:hover .omsncixfrjicon i,
        .omsncixfrjcard:focus-visible .omsncixfrjicon i {
            filter: brightness(1.2);
        }

        /* عنوان الكارد */
        .omsncixfrjtitle {
            color: var(--cititle);
            font-size: clamp(1rem, .92rem + .35vw, 1.14rem);
            font-weight: 700;
            line-height: 1.4;
        }

        /* وصف الكارد — أصغر وأخف من العنوان */
        .omsncixfrjdesc {
            max-width: 24ch;
            color: var(--citext);
            font-size: clamp(.8rem, .77rem + .18vw, .88rem);
            font-weight: 400;
            line-height: 1.7;
        }

/* حركة الظهور */
html.js .omsncixfrjinner.omsnreveal {
    opacity: 0;
}

html.js .omsncixfrjinner.omsnreveal.omsnvisible {
    opacity: 1;
    transition: opacity .5s ease;
}

@media (prefers-reduced-motion: reduce) {

    html.js .omsncixfrjinner.omsnreveal {
        opacity: 1;
        transition: none;
    }

}

/* الاستجابة */
@media (max-width: 720px) {

    .omsncixfrjgrid {
        grid-template-columns: 1fr;
    }

}