/* ═══════════════════════════════════════════════════════════════
   Foresight / wwwroot / css / marketing.css
   أنماط الصفحات التسويقية الداخلية.
   يرث متغيّرات الثيمات من foresight.css (--accent, --card, --bdr,
   --tx1/2/3, --shd, --inp, --accent-rgb, --tr) → 4 ثيمات + داكن/فاتح
   تلقائياً. RTL/LTR عبر [dir].
   ═══════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────
   1. الحاوية العامة (بلا max-width على المحتوى)
   ─────────────────────────────────────────────────────────────── */
.mkt-wrap {
    padding: 28px clamp(16px, 4vw, 48px);
    width: 100%;
}

.mkt-section-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--tx1);
    margin: 26px 0 14px;
    padding-inline-start: 12px;
    border-inline-start: 3px solid var(--accent);
    line-height: 1.4;
}

    .mkt-section-title:first-child {
        margin-top: 0;
    }

/* ═══════════════════════════════════════════════════════════════
   2. صفحة الدخول (Login) — صفحة واحدة، بطاقة مضمّنة فوق المدارات
   تتبع ثيم المنصة (فاتح/داكن + 4 ثيمات) عبر متغيّرات foresight.
   ═══════════════════════════════════════════════════════════════ */
.mkt-login {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 92px 22px 48px;
}

    /* توهّج علوي بلون الثيم */
    .mkt-login::before {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse 70% 55% at 50% 0%, rgba(var(--accent-rgb), .16), transparent 60%);
        pointer-events: none;
        z-index: 0;
    }

/* ── المدارات ── */
.mkt-orbits {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1100px;
    height: 1100px;
    pointer-events: none;
    z-index: 0;
}

.mkt-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(var(--accent-rgb), .14);
    border-radius: 50%;
}

    .mkt-ring.r1 {
        width: 280px;
        height: 280px;
        animation: mktSpin 30s linear infinite;
    }

    .mkt-ring.r2 {
        width: 520px;
        height: 520px;
        animation: mktSpin 48s linear infinite reverse;
    }

    .mkt-ring.r3 {
        width: 780px;
        height: 780px;
        animation: mktSpin 70s linear infinite;
    }

    .mkt-ring.r4 {
        width: 1060px;
        height: 1060px;
        animation: mktSpin 96s linear infinite reverse;
    }

@keyframes mktSpin {
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

.mkt-ring::before, .mkt-ring::after {
    content: '';
    position: absolute;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 14px rgba(var(--accent-rgb), .7);
}

.mkt-ring::before {
    top: -4px;
    left: 50%;
}

.mkt-ring::after {
    bottom: -4px;
    left: 50%;
}

.mkt-core {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--accent-lt, #edd67a), var(--accent));
    box-shadow: 0 0 50px rgba(var(--accent-rgb), .55);
    animation: mktPulse 5s ease-in-out infinite;
    z-index: 0;
}

@keyframes mktPulse {
    0%, 100% {
        box-shadow: 0 0 34px rgba(var(--accent-rgb), .4);
    }

    50% {
        box-shadow: 0 0 64px rgba(var(--accent-rgb), .8);
    }
}

/* ── أسماء الأدوات الموزّعة ── */
.mkt-scatter {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

    .mkt-scatter span {
        position: absolute;
        font-size: .72rem;
        font-weight: 600;
        color: var(--tx3);
        opacity: .35;
        white-space: nowrap;
        animation: mktFade 7s ease-in-out infinite;
    }

@keyframes mktFade {
    0%, 100% {
        opacity: .18;
    }

    50% {
        opacity: .5;
    }
}

/* ── الشريط العلوي ── */
.mkt-topbar {
    position: absolute;
    top: 0;
    inset-inline: 0;
    z-index: 5;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px clamp(16px, 4vw, 40px);
}

    .mkt-topbar .grp {
        display: flex;
        align-items: center;
        gap: 12px;
    }

.mkt-theme-dots {
    display: flex;
    gap: 9px;
}

    .mkt-theme-dots .dot {
        width: 16px;
        height: 16px;
        border-radius: 50%;
        outline: 1px solid var(--bdr);
        outline-offset: 1px;
        border: 2px solid transparent;
        cursor: pointer;
        transition: transform var(--tr);
    }

        .mkt-theme-dots .dot:hover {
            transform: scale(1.18);
        }

        .mkt-theme-dots .dot.active {
            outline-color: var(--tx1);
            outline-width: 2px;
        }

        .mkt-theme-dots .dot.gold {
            background: #d4a843;
        }

        .mkt-theme-dots .dot.green {
            background: #2e9e6b;
        }

        .mkt-theme-dots .dot.ocean {
            background: #2b7fd0;
        }

        .mkt-theme-dots .dot.maroon {
            background: #9e2e4e;
        }

.mkt-lang-btn, .mkt-support-btn {
    background: transparent;
    border: 1px solid var(--bdr);
    color: var(--tx2);
    border-radius: 8px;
    padding: 6px 12px;
    font-family: inherit;
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all var(--tr);
}

    .mkt-lang-btn:hover, .mkt-support-btn:hover {
        border-color: var(--accent);
        color: var(--accent);
    }

/* ── بطاقة الدخول المضمّنة ── */
.mkt-login-card {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 400px;
    background: var(--card);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--bdr);
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .18);
    padding: 40px 36px 30px;
    transition: box-shadow var(--tr);
}

    .mkt-login-card::before {
        content: '';
        position: absolute;
        top: 0;
        inset-inline: 0;
        height: 3px;
        background: linear-gradient(90deg, transparent 8%, var(--accent) 50%, transparent 92%);
        border-radius: 20px 20px 0 0;
    }

.mkt-login-logo {
    width: 124px;
    object-fit: contain;
    margin: 0 auto 18px;
    display: block;
}

.mkt-login-card h1 {
    font-size: 1.45rem;
    font-weight: 800;
    color: var(--tx1);
    text-align: center;
    margin-bottom: 4px;
}

.mkt-login-card .sub {
    font-size: .84rem;
    color: var(--tx3);
    text-align: center;
    margin-bottom: 26px;
}

.mkt-field {
    margin-bottom: 18px;
}

    .mkt-field label {
        display: block;
        font-size: .78rem;
        font-weight: 700;
        color: var(--tx2);
        margin-bottom: 7px;
    }

    .mkt-field input {
        width: 100%;
        background: var(--inp);
        border: 1px solid var(--bdr);
        border-radius: 10px;
        padding: 12px 14px;
        font-family: inherit;
        font-size: .9rem;
        color: var(--tx1);
        transition: border-color var(--tr), box-shadow var(--tr);
    }

        .mkt-field input:focus {
            outline: none;
            border-color: var(--accent);
            box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .14);
        }

.mkt-forgot {
    text-align: end;
    margin: -8px 0 20px;
}

    .mkt-forgot a {
        font-size: .78rem;
        color: var(--tx3);
        text-decoration: none;
        transition: color var(--tr);
    }

        .mkt-forgot a:hover {
            color: var(--accent);
        }

.mkt-btn-primary {
    width: 100%;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 13px;
    font-family: inherit;
    font-size: .95rem;
    font-weight: 700;
    cursor: pointer;
    transition: filter var(--tr), transform var(--tr);
}

    .mkt-btn-primary:hover {
        filter: brightness(1.08);
        transform: translateY(-1px);
    }

.mkt-card-tags {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 22px;
}

    .mkt-card-tags .tag {
        font-size: .7rem;
        color: var(--tx3);
        border: 1px solid var(--bdr);
        border-radius: 7px;
        padding: 4px 11px;
    }

.mkt-login-foot {
    text-align: center;
    margin-top: 18px;
    font-size: .68rem;
    letter-spacing: .5px;
    color: var(--tx3);
}

.mkt-validation {
    background: rgba(217, 83, 79, .08);
    border: 1px solid rgba(217, 83, 79, .2);
    color: #d9534f;
    border-radius: 10px;
    padding: 11px 14px;
    font-size: .82rem;
    margin-bottom: 18px;
    text-align: center;
}

/* ── احترام تفضيل تقليل الحركة ── */
@media (prefers-reduced-motion: reduce) {
    .mkt-ring, .mkt-core, .mkt-scatter span {
        animation: none !important;
    }
}


/* ═══════════════════════════════════════════════════════════════
   3. Landing — رأس بطل حيّ + فواصل مستويات + شبكة أدوات حرّة
   يرث _FORESIGHT_Layout. ألوان المستويات ثابتة (هوية تمييزية)؛
   باقي الألوان من متغيّرات الثيم.
   ═══════════════════════════════════════════════════════════════ */

/* ── الرأس البطل (بانر علوي داخل جسم الصفحة) ── */
/* ── الشريط العلوي المستقل لـ Landing ── */
.mkt-land-topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 28px;
    background: var(--card);
    border-bottom: 1px solid var(--bdr);
}

    .mkt-land-topbar .grp {
        display: flex;
        align-items: center;
        gap: 12px;
    }

.mkt-land-logo {
    height: 34px;
    width: auto;
    display: block;
}

.mkt-land-content {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 40px 50px;
}

.mkt-icon-pill {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    border: 1px solid var(--bdr);
    background: transparent;
    color: var(--tx2);
    cursor: pointer;
    display: inline-grid;
    place-items: center;
    transition: all var(--tr);
}

    .mkt-icon-pill:hover {
        border-color: var(--accent);
        color: var(--accent);
    }

    .mkt-icon-pill.danger:hover {
        border-color: #d9534f;
        color: #d9534f;
    }

/* ── الرأس البطل (صفحة مستقلة — يمتد كامل العرض) ── */
.mkt-hero {
    position: relative;
    padding: 48px 40px 110px;
    overflow: hidden;
    background: radial-gradient(ellipse 90% 100% at 70% 0%, rgba(var(--accent-rgb), .16), transparent 60%), #14110a;
}

.mkt-hero-grid {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(var(--accent-rgb), .05) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--accent-rgb), .05) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
}

.mkt-hero-orbits {
    position: absolute;
    top: 50%;
    inset-inline-start: 8%;
    transform: translateY(-50%);
    width: 480px;
    height: 480px;
    pointer-events: none;
}

    .mkt-hero-orbits .ring {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border: 1px solid rgba(var(--accent-rgb), .16);
        border-radius: 50%;
    }

    .mkt-hero-orbits .r1 {
        width: 120px;
        height: 120px;
        animation: mktSpin 26s linear infinite;
    }

    .mkt-hero-orbits .r2 {
        width: 240px;
        height: 240px;
        animation: mktSpin 42s linear infinite reverse;
    }

    .mkt-hero-orbits .r3 {
        width: 360px;
        height: 360px;
        animation: mktSpin 64s linear infinite;
    }

    .mkt-hero-orbits .r4 {
        width: 480px;
        height: 480px;
        animation: mktSpin 88s linear infinite reverse;
    }

@keyframes mktSpin {
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

.mkt-hero-orbits .ring::before,
.mkt-hero-orbits .ring::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 12px rgba(var(--accent-rgb), .7);
}

.mkt-hero-orbits .ring::before {
    top: -4px;
    left: 50%;
}

.mkt-hero-orbits .ring::after {
    bottom: -4px;
    left: 50%;
}

.mkt-hero-core {
    position: absolute;
    top: 50%;
    inset-inline-start: 8%;
    transform: translate(-50%, -50%);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--accent-lt, #edd67a), var(--accent));
    box-shadow: 0 0 44px rgba(var(--accent-rgb), .6);
    animation: mktPulse 5s ease-in-out infinite;
}

@keyframes mktPulse {
    0%, 100% {
        box-shadow: 0 0 30px rgba(var(--accent-rgb), .4);
    }

    50% {
        box-shadow: 0 0 58px rgba(var(--accent-rgb), .8);
    }
}

.mkt-hero-in {
    position: relative;
    z-index: 2;
    max-width: 1280px;
    margin: 0 auto;
}

    .mkt-hero-in h1 {
        font-size: 2rem;
        font-weight: 800;
        color: #f3ead0;
    }

    .mkt-hero-in p {
        font-size: .95rem;
        color: #c9b88a;
        margin-top: 10px;
        max-width: 520px;
        line-height: 1.85;
    }

.mkt-hero-stats {
    display: flex;
    gap: 36px;
    margin-top: 28px;
}

.mkt-hstat .v {
    font-size: 1.9rem;
    font-weight: 800;
    color: var(--accent);
    line-height: 1;
}

.mkt-hstat .l {
    font-size: .74rem;
    color: #a8956a;
    margin-top: 6px;
}

/* ── جسم الأدوات يطفو فوق الرأس ── */
.mkt-tools-body {
    position: relative;
    z-index: 3;
    margin-top: -68px;
    padding-bottom: 20px;
}

/* فاصل المستوى (لا صندوق) */
.mkt-lvsep {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 34px 0 18px;
}

    .mkt-lvsep:first-child {
        margin-top: 0;
    }

    .mkt-lvsep .badge {
        width: 38px;
        height: 38px;
        border-radius: 11px;
        display: grid;
        place-items: center;
        flex-shrink: 0;
        font-size: 1rem;
        font-weight: 800;
        color: #fff;
        font-style: italic;
        box-shadow: 0 6px 16px rgba(var(--lc-rgb), .35);
    }

    .mkt-lvsep .txt {
        flex-shrink: 0;
    }

        .mkt-lvsep .txt .t {
            font-size: 1.05rem;
            font-weight: 800;
            color: var(--lc);
        }

        .mkt-lvsep .txt .s {
            font-size: .74rem;
            color: var(--tx3);
            margin-top: 1px;
        }

    .mkt-lvsep .ln {
        flex: 1;
        height: 2px;
        border-radius: 2px;
        background: linear-gradient(270deg, rgba(var(--lc-rgb), .35), transparent);
    }

[dir="ltr"] .mkt-lvsep .ln {
    background: linear-gradient(90deg, rgba(var(--lc-rgb), .35), transparent);
}

.mkt-lvsep .cnt {
    flex-shrink: 0;
    font-size: .72rem;
    color: var(--lc);
    font-weight: 800;
    background: rgba(var(--lc-rgb), .1);
    padding: 5px 13px;
    border-radius: 20px;
}

/* شبكة الأدوات الحرّة */
.mkt-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(206px, 1fr));
    gap: 14px;
    margin-bottom: 8px;
}

.mkt-tool {
    position: relative;
    background: var(--card);
    border: 1px solid var(--bdr);
    border-radius: 16px;
    padding: 18px;
    display: flex;
    align-items: center;
    gap: 13px;
    text-decoration: none;
    color: var(--tx1);
    overflow: hidden;
    transition: transform .28s cubic-bezier(.4,0,.2,1), box-shadow .28s, border-color .28s;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0,0,0,.05);
}

    .mkt-tool .ghost {
        position: absolute;
        top: -12px;
        inset-inline-start: -8px;
        font-size: 68px;
        color: var(--lc);
        opacity: .05;
        transition: all .3s;
    }

    .mkt-tool:hover {
        transform: translateY(-5px);
        border-color: var(--lc);
        box-shadow: 0 16px 38px rgba(var(--lc-rgb), .24);
    }

        .mkt-tool:hover .ghost {
            opacity: .13;
            transform: scale(1.12) rotate(-8deg);
        }

    .mkt-tool .ic {
        width: 46px;
        height: 46px;
        border-radius: 13px;
        flex-shrink: 0;
        display: grid;
        place-items: center;
        font-size: 1.25rem;
        background: rgba(var(--lc-rgb), .12);
        color: var(--lc);
        transition: all .28s;
        position: relative;
    }

    .mkt-tool:hover .ic {
        background: linear-gradient(135deg, var(--lc), var(--lc-lt));
        color: #fff;
        transform: rotate(-6deg) scale(1.08);
        box-shadow: 0 8px 18px rgba(var(--lc-rgb), .45);
    }

    .mkt-tool .meta {
        position: relative;
        min-width: 0;
    }

    .mkt-tool .nm {
        font-size: .95rem;
        font-weight: 700;
        line-height: 1.35;
    }

    .mkt-tool .en {
        font-size: .68rem;
        color: var(--tx3);
        margin-top: 2px;
    }

    .mkt-tool.locked {
        opacity: .5;
        filter: grayscale(.8);
    }

        .mkt-tool.locked:hover {
            transform: none;
            border-color: var(--bdr);
            box-shadow: 0 2px 10px rgba(0,0,0,.05);
        }

        .mkt-tool.locked .ic {
            background: rgba(128,128,128,.12);
            color: var(--tx3);
        }

        .mkt-tool.locked:hover .ghost {
            opacity: .05;
            transform: none;
        }

    .mkt-tool .lk {
        position: absolute;
        top: 11px;
        inset-inline-start: 11px;
        font-size: .72rem;
        color: var(--tx3);
        z-index: 2;
    }

/* ألوان المستويات الأربعة — ثابتة (هوية تمييزية) */
.lv1 {
    --lc: #c0392b;
    --lc-lt: #e05545;
    --lc-rgb: 192,57,43;
}

.lv2 {
    --lc: #b8862a;
    --lc-lt: #d6a23e;
    --lc-rgb: 184,134,42;
}

.lv3 {
    --lc: #1e7a5a;
    --lc-lt: #2a9b73;
    --lc-rgb: 30,122,90;
}

.lv4 {
    --lc: #2e6fa8;
    --lc-lt: #3f8bcf;
    --lc-rgb: 46,111,168;
}

@media (max-width: 640px) {
    .mkt-hero {
        padding: 36px 22px 96px;
    }

    .mkt-hero-orbits {
        opacity: .4;
    }

    .mkt-hero-in h1 {
        font-size: 1.6rem;
    }

    .mkt-hero-stats {
        gap: 22px;
    }

    .mkt-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }
}

@media (prefers-reduced-motion: reduce) {
    .mkt-hero-orbits .ring, .mkt-hero-core {
        animation: none;
    }
}



/* ═══════════════════════════════════════════════════════════════
   4. الصفحة الوسيطة (Tool Detail) — مستقلة، تسويقية إقناعية
   رأس حيّ + سلوقن + وصف + خطوات timeline + مميزات + علاقة استراتيجية
   ═══════════════════════════════════════════════════════════════ */

/* ── الرأس الحيّ المصغّر ── */
.mkt-dhero {
    position: relative;
    overflow: hidden;
    padding: 46px 32px 40px;
    background: radial-gradient(ellipse 80% 100% at 75% 0%, rgba(var(--accent-rgb), .16), transparent 60%), #14110a;
}

.mkt-dhero-grid {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(var(--accent-rgb), .05) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--accent-rgb), .05) 1px, transparent 1px);
    background-size: 36px 36px;
}

.mkt-dhero .ghost {
    position: absolute;
    top: -30px;
    inset-inline-start: -20px;
    font-size: 200px;
    color: var(--accent);
    opacity: .06;
}

.mkt-dhero-in {
    position: relative;
    z-index: 2;
    max-width: 860px;
    margin: 0 auto;
}

.mkt-dhero-top {
    display: flex;
    align-items: center;
    gap: 18px;
}

.mkt-dhero .ic {
    width: 66px;
    height: 66px;
    border-radius: 18px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    font-size: 1.8rem;
    background: linear-gradient(135deg, var(--accent), var(--accent-lt, #edd67a));
    color: #fff;
    box-shadow: 0 10px 26px rgba(var(--accent-rgb), .4);
}

.mkt-dhero .meta .badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(217, 83, 79, .18);
    color: #ff8a84;
    border-radius: 8px;
    padding: 4px 11px;
    font-size: .72rem;
    font-weight: 700;
    margin-bottom: 7px;
}

.mkt-dhero .meta h1 {
    font-size: 1.7rem;
    font-weight: 800;
    color: #f3ead0;
    line-height: 1.3;
}

.mkt-dhero .meta .alt {
    font-size: .82rem;
    color: #c9b88a;
    margin-top: 3px;
}

    .mkt-dhero .meta .alt .code {
        color: var(--accent);
        font-weight: 700;
    }

/* ── جسم المحتوى ── */
.mkt-dwrap {
    max-width: 860px;
    margin: -22px auto 0;
    padding: 0 32px 60px;
    position: relative;
    z-index: 3;
}

/* السلوقن */
.mkt-slogan {
    background: var(--card);
    border: 1px solid var(--bdr);
    border-radius: 18px;
    padding: 26px 30px;
    box-shadow: 0 12px 36px rgba(0,0,0,.08);
    position: relative;
    overflow: hidden;
    margin-bottom: 26px;
}

    .mkt-slogan::before {
        content: '\201D';
        position: absolute;
        top: -20px;
        inset-inline-end: 18px;
        font-size: 120px;
        color: var(--accent);
        opacity: .12;
        font-family: Georgia, serif;
    }

    .mkt-slogan p {
        font-size: 1.5rem;
        font-weight: 800;
        color: var(--accent);
        line-height: 1.5;
        position: relative;
    }

/* الوصف */
.mkt-ddesc {
    font-size: 1.05rem;
    line-height: 2.1;
    color: var(--tx1);
    margin-bottom: 34px;
}

/* عناوين الأقسام */
.mkt-sec-title {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--tx1);
    margin-bottom: 22px;
    display: flex;
    align-items: center;
    gap: 10px;
}

    .mkt-sec-title i {
        color: var(--accent);
    }

/* الخطوات — خط زمني */
.mkt-timeline {
    position: relative;
    padding-inline-start: 8px;
    margin-bottom: 38px;
}

.mkt-tstep {
    position: relative;
    padding-inline-start: 54px;
    padding-bottom: 22px;
}

    .mkt-tstep:last-child {
        padding-bottom: 0;
    }

    .mkt-tstep::before {
        content: '';
        position: absolute;
        inset-inline-start: 17px;
        top: 34px;
        bottom: -2px;
        width: 2px;
        background: linear-gradient(var(--accent), rgba(var(--accent-rgb), .15));
    }

    .mkt-tstep:last-child::before {
        display: none;
    }

    .mkt-tstep .num {
        position: absolute;
        inset-inline-start: 0;
        top: 0;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: var(--card);
        border: 2px solid var(--accent);
        color: var(--accent);
        display: grid;
        place-items: center;
        font-weight: 800;
        font-size: .92rem;
        z-index: 2;
    }

    .mkt-tstep .body {
        background: var(--card);
        border: 1px solid var(--bdr);
        border-radius: 13px;
        padding: 15px 18px;
        box-shadow: 0 2px 10px rgba(0,0,0,.04);
        transition: all .25s;
    }

        .mkt-tstep .body:hover {
            border-color: var(--accent);
            transform: translateX(-3px);
        }

[dir="ltr"] .mkt-tstep .body:hover {
    transform: translateX(3px);
}

.mkt-tstep .body p {
    font-size: .96rem;
    line-height: 1.8;
    color: var(--tx1);
}

/* المميزات — شبكة بطاقات */
.mkt-features {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
    margin-bottom: 38px;
}

.mkt-feat {
    background: var(--card);
    border: 1px solid var(--bdr);
    border-radius: 13px;
    padding: 16px 18px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    transition: all .25s;
}

    .mkt-feat:hover {
        border-color: var(--accent);
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(var(--accent-rgb), .12);
    }

    .mkt-feat .fi {
        width: 32px;
        height: 32px;
        border-radius: 9px;
        flex-shrink: 0;
        display: grid;
        place-items: center;
        background: rgba(var(--accent-rgb), .12);
        color: var(--accent);
        font-size: .85rem;
    }

    .mkt-feat p {
        font-size: .92rem;
        line-height: 1.7;
        color: var(--tx1);
    }

/* العلاقة بالقرار الاستراتيجي — لوحة بارزة */
.mkt-strategic {
    background: linear-gradient(135deg, rgba(var(--accent-rgb), .1), rgba(var(--accent-rgb), .02));
    border: 1px solid rgba(var(--accent-rgb), .3);
    border-radius: 18px;
    padding: 28px 30px;
    margin-bottom: 38px;
    position: relative;
    overflow: hidden;
}

    .mkt-strategic .lbl {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: .85rem;
        font-weight: 800;
        color: var(--accent);
        letter-spacing: .5px;
        margin-bottom: 12px;
    }

    .mkt-strategic p {
        font-size: 1.02rem;
        line-height: 2;
        color: var(--tx1);
        position: relative;
    }

/* الإجراءات */
.mkt-dactions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    padding-top: 28px;
    border-top: 1px solid var(--bdr);
}

.mkt-btn-out {
    background: transparent;
    border: 1px solid var(--bdr);
    color: var(--tx1);
    border-radius: 10px;
    padding: 13px 22px;
    font-family: inherit;
    font-size: .92rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    transition: all .25s;
}

    .mkt-btn-out:hover {
        border-color: var(--accent);
        color: var(--accent);
    }

.mkt-btn-fill {
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 13px 24px;
    font-family: inherit;
    font-size: .92rem;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    transition: filter .25s, transform .25s;
}

    .mkt-btn-fill:hover {
        filter: brightness(1.08);
        transform: translateY(-1px);
    }

@media (max-width: 600px) {
    .mkt-dhero {
        padding: 34px 20px 32px;
    }

        .mkt-dhero .meta h1 {
            font-size: 1.4rem;
        }

    .mkt-dwrap {
        padding: 0 20px 50px;
    }

    .mkt-slogan p {
        font-size: 1.25rem;
    }

    .mkt-dactions .mkt-btn-out, .mkt-dactions .mkt-btn-fill {
        width: 100%;
        justify-content: center;
    }
}


/* ═══════════════════════════════════════════════════════════════
   5. نموذج التواصل — مستقل
   ═══════════════════════════════════════════════════════════════ */
.mkt-contact-wrap {
    max-width: 640px;
    margin: -22px auto 0;
    padding: 0 32px 60px;
    position: relative;
    z-index: 3;
}

.mkt-contact-card {
    background: var(--card);
    border: 1px solid var(--bdr);
    border-radius: 18px;
    padding: 30px 30px 26px;
    box-shadow: 0 12px 36px rgba(0,0,0,.08);
}

.mkt-contact-tool {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(var(--accent-rgb), .1);
    border: 1px solid rgba(var(--accent-rgb), .25);
    border-radius: 11px;
    padding: 12px 16px;
    margin-bottom: 22px;
    font-size: .9rem;
    color: var(--tx1);
}

    .mkt-contact-tool i {
        color: var(--accent);
    }

    .mkt-contact-tool strong {
        color: var(--accent);
    }

.mkt-contact-card .mkt-field {
    margin-bottom: 18px;
}

    .mkt-contact-card .mkt-field label {
        display: block;
        font-size: .82rem;
        font-weight: 700;
        color: var(--tx2);
        margin-bottom: 7px;
    }

        .mkt-contact-card .mkt-field label .req {
            color: #d9534f;
        }

    .mkt-contact-card .mkt-field input,
    .mkt-contact-card .mkt-field textarea {
        width: 100%;
        background: var(--inp);
        border: 1px solid var(--bdr);
        border-radius: 10px;
        padding: 12px 14px;
        font-family: inherit;
        font-size: .92rem;
        color: var(--tx1);
        transition: border-color var(--tr), box-shadow var(--tr);
        resize: vertical;
    }

        .mkt-contact-card .mkt-field input:focus,
        .mkt-contact-card .mkt-field textarea:focus {
            outline: none;
            border-color: var(--accent);
            box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .14);
        }

.mkt-contact-submit {
    width: 100%;
    justify-content: center;
    margin-top: 6px;
}

@media (max-width: 600px) {
    .mkt-contact-wrap {
        padding: 0 18px 50px;
    }

    .mkt-contact-card {
        padding: 24px 20px 22px;
    }
}


/* ═══════════════════════════════════════════════════════════════
   6. لوحات الإدارة (SUPERADMIN) — مستقلة
   ═══════════════════════════════════════════════════════════════ */
.mkt-admin-wrap {
    max-width: 1100px;
    margin: 28px auto 0;
    padding: 0 28px 60px;
}

.mkt-admin-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 22px;
}

    .mkt-admin-head h1 {
        font-size: 1.5rem;
        font-weight: 800;
        color: var(--tx1);
    }

    .mkt-admin-head p {
        font-size: .85rem;
        color: var(--tx3);
        margin-top: 3px;
    }

/* جدول الأدوات (صفوف grid) */
.mkt-admin-table {
    background: var(--card);
    border: 1px solid var(--bdr);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 6px 24px rgba(0,0,0,.06);
}

.mkt-admin-row {
    display: grid;
    grid-template-columns: 70px 1fr 90px 160px 70px;
    align-items: center;
    gap: 12px;
    padding: 13px 18px;
    border-bottom: 1px solid var(--bdr);
}

    .mkt-admin-row:last-child {
        border-bottom: none;
    }

.mkt-admin-thead {
    background: var(--inp);
    font-size: .76rem;
    font-weight: 800;
    color: var(--tx2);
    text-transform: uppercase;
    letter-spacing: .5px;
}

.mkt-admin-row .code-badge {
    display: inline-block;
    font-size: .74rem;
    font-weight: 800;
    color: var(--accent);
    background: rgba(var(--accent-rgb), .12);
    border-radius: 7px;
    padding: 3px 9px;
}

.mkt-admin-row .c-name {
    display: flex;
    align-items: center;
    gap: 12px;
}

    .mkt-admin-row .c-name > i {
        color: var(--accent);
        font-size: 1.05rem;
        width: 22px;
        text-align: center;
    }

    .mkt-admin-row .c-name .nm {
        font-size: .92rem;
        font-weight: 700;
        color: var(--tx1);
    }

    .mkt-admin-row .c-name .alt {
        font-size: .72rem;
        color: var(--tx3);
        margin-top: 1px;
    }

.mkt-admin-row .lvl-chip {
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    font-size: .8rem;
    font-weight: 800;
    color: #fff;
}

.lvl-chip.lv1 {
    background: #c0392b;
}

.lvl-chip.lv2 {
    background: #b8862a;
}

.lvl-chip.lv3 {
    background: #1e7a5a;
}

.lvl-chip.lv4 {
    background: #2e6fa8;
}

.mkt-admin-row .c-state {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mkt-admin-row .state-label {
    font-size: .8rem;
    color: var(--tx2);
    font-weight: 600;
}

/* مفتاح التبديل */
.mkt-switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
    flex-shrink: 0;
}

    .mkt-switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

    .mkt-switch .slider {
        position: absolute;
        inset: 0;
        cursor: pointer;
        background: var(--bdr);
        border-radius: 22px;
        transition: background .25s;
    }

        .mkt-switch .slider::before {
            content: '';
            position: absolute;
            height: 16px;
            width: 16px;
            inset-inline-start: 3px;
            top: 3px;
            background: #fff;
            border-radius: 50%;
            transition: transform .25s;
        }

    .mkt-switch input:checked + .slider {
        background: var(--accent);
    }

        .mkt-switch input:checked + .slider::before {
            transform: translateX(18px);
        }

[dir="rtl"] .mkt-switch input:checked + .slider::before {
    transform: translateX(-18px);
}

/* جدول الرسائل (AdminContact) */
.mkt-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--card);
    border: 1px solid var(--bdr);
    border-radius: 14px;
    overflow: hidden;
}

    .mkt-table th, .mkt-table td {
        padding: 13px 16px;
        text-align: start;
        font-size: .88rem;
        border-bottom: 1px solid var(--bdr);
        color: var(--tx1);
    }

    .mkt-table th {
        background: var(--inp);
        color: var(--tx2);
        font-weight: 700;
    }

    .mkt-table tr:last-child td {
        border-bottom: none;
    }

    .mkt-table tr.unread td {
        font-weight: 700;
    }

        .mkt-table tr.unread td:first-child {
            border-inline-start: 3px solid var(--accent);
        }

@media (max-width: 720px) {
    .mkt-admin-row {
        grid-template-columns: 56px 1fr 110px;
    }

        .mkt-admin-row .c-lvl, .mkt-admin-row .c-act {
            display: none;
        }
}

/* ── نموذج تحرير محتوى الأداة ── */
.mkt-edit-card {
    background: var(--card);
    border: 1px solid var(--bdr);
    border-radius: 16px;
    padding: 26px 26px 22px;
    box-shadow: 0 6px 24px rgba(0,0,0,.06);
}

.mkt-edit-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(var(--accent-rgb), .1);
    border-radius: 10px;
    padding: 10px 14px;
    font-size: .82rem;
    color: var(--tx2);
    margin-bottom: 22px;
}

    .mkt-edit-hint i {
        color: var(--accent);
    }

.mkt-edit-group {
    margin-bottom: 24px;
}

    .mkt-edit-group .g-title {
        font-size: .9rem;
        font-weight: 800;
        color: var(--tx1);
        margin-bottom: 12px;
        padding-inline-start: 10px;
        border-inline-start: 3px solid var(--accent);
    }

    .mkt-edit-group .g-pair {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px;
    }

.mkt-edit-card .mkt-field {
    margin-bottom: 0;
}

    .mkt-edit-card .mkt-field label {
        display: block;
        font-size: .76rem;
        font-weight: 700;
        color: var(--tx3);
        margin-bottom: 6px;
    }

    .mkt-edit-card .mkt-field input,
    .mkt-edit-card .mkt-field textarea {
        width: 100%;
        background: var(--inp);
        border: 1px solid var(--bdr);
        border-radius: 9px;
        padding: 11px 13px;
        font-family: inherit;
        font-size: .9rem;
        color: var(--tx1);
        transition: border-color var(--tr), box-shadow var(--tr);
        resize: vertical;
        line-height: 1.7;
    }

        .mkt-edit-card .mkt-field input:focus,
        .mkt-edit-card .mkt-field textarea:focus {
            outline: none;
            border-color: var(--accent);
            box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .14);
        }

.mkt-edit-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    padding-top: 22px;
    margin-top: 6px;
    border-top: 1px solid var(--bdr);
}
/* ── تفاصيل الرسالة ── */
.mkt-msg-wrap {
    max-width: 760px;
    margin: 28px auto 0;
    padding: 0 28px 60px;
}

.mkt-msg-card {
    background: var(--card);
    border: 1px solid var(--bdr);
    border-radius: 16px;
    padding: 28px;
    box-shadow: 0 6px 24px rgba(0,0,0,.06);
}

.mkt-msg-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--bdr);
}

    .mkt-msg-head .avatar {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        flex-shrink: 0;
        display: grid;
        place-items: center;
        font-size: 1.3rem;
        font-weight: 800;
        color: #fff;
        background: linear-gradient(135deg, var(--accent), var(--accent-lt, #edd67a));
    }

    .mkt-msg-head .meta {
        flex: 1;
        min-width: 0;
    }

        .mkt-msg-head .meta h1 {
            font-size: 1.15rem;
            font-weight: 800;
            color: var(--tx1);
        }

        .mkt-msg-head .meta .email {
            font-size: .84rem;
            color: var(--accent);
            text-decoration: none;
        }

            .mkt-msg-head .meta .email:hover {
                text-decoration: underline;
            }

    .mkt-msg-head .date {
        font-size: .76rem;
        color: var(--tx3);
        flex-shrink: 0;
    }

.mkt-msg-info {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    padding: 18px 0;
    border-bottom: 1px solid var(--bdr);
}

    .mkt-msg-info .info-item {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

        .mkt-msg-info .info-item .k {
            font-size: .72rem;
            color: var(--tx3);
            font-weight: 700;
        }

        .mkt-msg-info .info-item .v {
            font-size: .9rem;
            color: var(--tx1);
        }

.mkt-msg-body {
    padding: 22px 0;
    font-size: 1rem;
    line-height: 2;
    color: var(--tx1);
    white-space: pre-wrap;
}

.mkt-msg-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    padding-top: 20px;
    border-top: 1px solid var(--bdr);
}

.mkt-btn-out.danger {
    color: #d9534f;
    border-color: rgba(217,83,79,.3);
}

    .mkt-btn-out.danger:hover {
        border-color: #d9534f;
        background: rgba(217,83,79,.06);
    }

@media (max-width: 600px) {
    .mkt-msg-wrap {
        padding: 0 18px 50px;
    }

    .mkt-msg-head {
        flex-wrap: wrap;
    }

        .mkt-msg-head .date {
            width: 100%;
        }

    .mkt-msg-actions {
        flex-direction: column-reverse;
    }

        .mkt-msg-actions .mkt-btn-out, .mkt-msg-actions .mkt-btn-fill {
            width: 100%;
            justify-content: center;
        }
}
@media (max-width: 720px) {
    .mkt-edit-group .g-pair {
        grid-template-columns: 1fr;
    }

    .mkt-edit-actions .mkt-btn-out, .mkt-edit-actions .mkt-btn-fill {
        flex: 1;
        justify-content: center;
    }
}