/* =====================================================================
   🌍 marketing.css — الصفحات العامة وحدها
   ---------------------------------------------------------------------
   ⚠️ ليه ملف منفصل تمامًا عن app.css
   ---------------------------------------------------------------------
   `app.css` هو 108KB بيغطي شاشات التطبيق كلها: السايدبار، التاب بار،
   الجداول، الفورمات، الرسوم. الزائر اللي بيفتح الصفحة الرئيسية أول مرة
   مش محتاج ولا واحدة منهم — وهو بالظبط الشخص اللي أبطأ نت وأول انطباع.
   تحميل 108KB + Font Awesome عشان صفحة فيها ست بلوكات نص هو الفرق بين
   Lighthouse فوق ٩٠ وتحته.

   فالملف ده بيتكتب من الصفر بالتوكنز اللي محتاجها بس. مافيش import من
   app.css ومافيش Font Awesome — كل أيقونة هنا SVG inline في الـview.

   ---------------------------------------------------------------------
   الاتجاه
   ---------------------------------------------------------------------
   مافيش `left` ولا `right` ولا `margin-left` في الملف ده. كله logical
   properties (`inline-start` / `inline-end`) عشان نفس الشيت يشتغل عربي
   وإنجليزي من غير أي override — الـLTR مش حالة استثنائية بتتصلّح بعدين.

   ---------------------------------------------------------------------
   الثيم
   ---------------------------------------------------------------------
   داكن، بقرار. التطبيق نفسه داكن افتراضيًا واللقطات اللي في الصفحة
   داكنة؛ صفحة تسويقية فاتحة بتوريلك منتج مختلف عن اللي هتدخله. مافيش
   مبدّل ثيم هنا لأنه محتاج جافاسكريبت وlocalStorage عشان نص واحد.
   ===================================================================== */

:root {
    /* نفس درجات app.css بالظبط — الصفحة لازم تحس إنها نفس المنتج */
    --mk-primary: #6366f1;
    --mk-primary-strong: #4f46e5;
    --mk-secondary: #8b5cf6;
    --mk-accent: #60a5fa;
    --mk-success: #34d399;

    --mk-bg: #0b1220;
    --mk-surface: #131c31;
    --mk-surface-2: rgba(255, 255, 255, 0.04);
    --mk-border: rgba(148, 163, 184, 0.16);
    --mk-border-strong: rgba(148, 163, 184, 0.32);

    --mk-text: #f1f5f9;
    --mk-muted: #94a3b8;
    /* ♿ ‏#6366f1 على الخلفية الداكنة بيقيس 3.85:1 — أقل من AA. مخلوط
       بلون النص بيوصل ~6.9:1 وبيحتفظ بنفس الدرجة. نفس منطق app.css. */
    --mk-primary-text: #a5b4fc;

    --mk-radius: 16px;
    --mk-radius-sm: 10px;
    --mk-shadow: 0 18px 40px rgba(2, 6, 23, 0.45);
    --mk-container: 1120px;

    color-scheme: dark;
}

/* ===================================================================
   الأساسيات
   =================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

body {
    margin: 0;
    font-family: 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 16px;
    line-height: 1.75;
    color: var(--mk-text);
    background: var(--mk-bg);
    /* التدرّج ده هو نفس بصمة `--bg-gradient` في التطبيق، بس بطبقتين بدل
       تلاتة عشان مايتكلفش paint زيادة على موبايل ضعيف. */
    background-image:
        radial-gradient(900px 480px at 85% -8%, rgba(99, 102, 241, 0.18), transparent 62%),
        radial-gradient(700px 420px at 8% 102%, rgba(96, 165, 250, 0.10), transparent 58%);
    background-attachment: fixed;
    overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--mk-primary-text); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { line-height: 1.3; margin: 0 0 0.5em; font-weight: 800; letter-spacing: -0.01em; }
h1 { font-size: clamp(1.9rem, 5.2vw, 3.2rem); }
h2 { font-size: clamp(1.5rem, 3.6vw, 2.25rem); }
h3 { font-size: clamp(1.05rem, 2.2vw, 1.25rem); font-weight: 700; }
p  { margin: 0 0 1rem; }

/* ♿ حلقة تركيز واحدة لكل حاجة قابلة للتفاعل — التنقّل بالكيبورد لازم
   يبان على صفحة عامة زي ما بيبان جوه التطبيق. */
:where(a, button, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--mk-accent);
    outline-offset: 3px;
    border-radius: 6px;
}

.mk-container {
    inline-size: min(100% - 32px, var(--mk-container));
    margin-inline: auto;
}

/* رابط التخطّي — بيظهر بالكيبورد بس */
.mk-skip {
    position: absolute;
    inset-block-start: -100px;
    inset-inline-start: 16px;
    z-index: 60;
    padding: 10px 16px;
    border-radius: var(--mk-radius-sm);
    background: var(--mk-primary-strong);
    color: #fff;
}
.mk-skip:focus { inset-block-start: 12px; }

/* ===================================================================
   الأزرار
   =================================================================== */
.mk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 26px;
    border: 1px solid transparent;
    border-radius: 999px;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.mk-btn:hover { text-decoration: none; transform: translateY(-1px); }

.mk-btn-primary {
    color: #fff;
    background: linear-gradient(135deg, var(--mk-primary), var(--mk-secondary));
    box-shadow: 0 10px 26px rgba(99, 102, 241, 0.34);
}
.mk-btn-primary:hover { box-shadow: 0 14px 32px rgba(99, 102, 241, 0.44); }

.mk-btn-ghost {
    color: var(--mk-text);
    background: var(--mk-surface-2);
    border-color: var(--mk-border-strong);
}
.mk-btn-ghost:hover { background: rgba(255, 255, 255, 0.08); }

.mk-btn-sm { padding: 9px 18px; font-size: 0.92rem; }
.mk-btn-block { inline-size: 100%; }

/* ===================================================================
   الهيدر
   =================================================================== */
.mk-header {
    position: sticky;
    inset-block-start: 0;
    z-index: 50;
    background: rgba(11, 18, 32, 0.86);
    backdrop-filter: blur(12px);
    border-block-end: 1px solid var(--mk-border);
}

.mk-nav {
    display: flex;
    align-items: center;
    gap: 14px;
    min-block-size: 66px;
}

.mk-logo {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-weight: 800;
    font-size: 1.16rem;
    color: var(--mk-text);
    margin-inline-end: auto;
}
.mk-logo:hover { text-decoration: none; }
.mk-logo svg { inline-size: 28px; block-size: 28px; flex: none; }

.mk-nav-links { display: flex; align-items: center; gap: 6px; }
.mk-nav-links a {
    padding: 8px 12px;
    border-radius: var(--mk-radius-sm);
    color: var(--mk-muted);
    font-weight: 600;
    font-size: 0.95rem;
}
.mk-nav-links a:hover { color: var(--mk-text); background: var(--mk-surface-2); text-decoration: none; }

.mk-lang {
    padding: 7px 13px;
    border: 1px solid var(--mk-border-strong);
    border-radius: 999px;
    color: var(--mk-muted);
    font-size: 0.87rem;
    font-weight: 700;
}
.mk-lang:hover { color: var(--mk-text); text-decoration: none; }

/* الموبايل: الروابط الوسط بتختفي. الـCTA والدخول ومبدّل اللغة بيفضلوا
   ظاهرين — دول التلاتة اللي الصفحة موجودة عشانهم، وقايمة برجر عشان
   لينكين هي جافاسكريبت من غير سبب. */
@media (max-width: 720px) {
    .mk-nav-links { display: none; }
    .mk-nav { min-block-size: 58px; gap: 8px; }
    .mk-logo { font-size: 1.02rem; }
}

/* ===================================================================
   الأقسام
   =================================================================== */
.mk-section { padding-block: clamp(48px, 8vw, 92px); }
.mk-section-alt {
    background: rgba(255, 255, 255, 0.022);
    border-block: 1px solid var(--mk-border);
}

.mk-section-head { max-inline-size: 720px; margin-inline: auto; text-align: center; margin-block-end: 44px; }
.mk-section-head p { color: var(--mk-muted); font-size: 1.05rem; margin: 0; }

.mk-eyebrow {
    display: inline-block;
    padding: 6px 14px;
    margin-block-end: 18px;
    border: 1px solid rgba(99, 102, 241, 0.36);
    border-radius: 999px;
    background: rgba(99, 102, 241, 0.12);
    color: var(--mk-primary-text);
    font-size: 0.85rem;
    font-weight: 700;
}

/* ===================================================================
   الواجهة (Hero)
   =================================================================== */
.mk-hero { padding-block: clamp(52px, 9vw, 104px) clamp(40px, 7vw, 76px); text-align: center; }
.mk-hero-inner { max-inline-size: 800px; margin-inline: auto; }
.mk-hero p.mk-hero-sub {
    font-size: clamp(1rem, 2.1vw, 1.2rem);
    color: var(--mk-muted);
    max-inline-size: 640px;
    margin-inline: auto;
    margin-block-end: 30px;
}
.mk-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.mk-hero-note { margin-block-start: 16px; font-size: 0.9rem; color: var(--mk-muted); }

/* ===================================================================
   الشبكات والكروت
   =================================================================== */
.mk-grid { display: grid; gap: 18px; }
.mk-grid-3 { grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); }
.mk-grid-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

.mk-card {
    padding: 26px 24px;
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-radius);
    background: var(--mk-surface);
}
.mk-card h3 { margin-block-end: 8px; }
.mk-card p { margin: 0; color: var(--mk-muted); font-size: 0.97rem; }

.mk-icon {
    display: grid;
    place-items: center;
    inline-size: 44px;
    block-size: 44px;
    margin-block-end: 16px;
    border-radius: 12px;
    background: rgba(99, 102, 241, 0.14);
    color: var(--mk-primary-text);
}
.mk-icon svg { inline-size: 22px; block-size: 22px; }
.mk-icon-warn { background: rgba(251, 191, 36, 0.14); color: #fbbf24; }

/* ===================================================================
   اللقطات
   =================================================================== */
.mk-shots { display: grid; gap: 34px; }

.mk-shot {
    display: grid;
    gap: 22px;
    align-items: center;
    grid-template-columns: 1fr;
}
@media (min-width: 860px) {
    .mk-shot { grid-template-columns: 1.05fr 1fr; }
    /* تبادل ناحية الصورة كل صف. `order` منطقي مش يمين/شمال، فبيتقلب
       صح مع اتجاه الصفحة من غير أي media query تانية. */
    .mk-shot:nth-child(even) .mk-shot-media { order: -1; }
}

.mk-shot-body h3 { margin-block-end: 10px; }
.mk-shot-body p { color: var(--mk-muted); margin: 0; }

/* ⚠️ aspect-ratio ثابت والمقاس متحدّد قبل ما الصورة تنزل — من غير كده
   الصفحة بتقفز لما اللقطات تحمّل (CLS) وده لوحده بيوقّع درجة الأداء. */
.mk-shot-media {
    aspect-ratio: 16 / 10;
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-radius);
    background: var(--mk-surface);
    box-shadow: var(--mk-shadow);
    overflow: hidden;
}
.mk-shot-media img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: top center; }

/* البلوك الفاضي لحد ما اللقطات الحقيقية توصل */
.mk-shot-placeholder {
    display: grid;
    place-items: center;
    block-size: 100%;
    gap: 10px;
    color: var(--mk-muted);
    font-size: 0.9rem;
    background: repeating-linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.022) 0 12px,
        transparent 12px 24px
    );
}
.mk-shot-placeholder svg { inline-size: 34px; block-size: 34px; opacity: 0.5; }

/* ===================================================================
   خطوات الدفع
   =================================================================== */
.mk-steps { counter-reset: mkstep; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.mk-step { padding: 24px; border: 1px solid var(--mk-border); border-radius: var(--mk-radius); background: var(--mk-surface); }
.mk-step h3 { color: var(--mk-primary-text); font-size: 1rem; margin-block-end: 6px; }
.mk-step p { margin: 0; color: var(--mk-muted); font-size: 0.96rem; }

.mk-methods { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-block-start: 26px; }
.mk-method {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border: 1px solid var(--mk-border-strong);
    border-radius: 999px;
    background: var(--mk-surface-2);
    font-weight: 700;
    font-size: 0.94rem;
}
.mk-method svg { inline-size: 18px; block-size: 18px; color: var(--mk-success); }

/* ===================================================================
   الأسعار
   =================================================================== */
.mk-plans {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(288px, 1fr));
    max-inline-size: 820px;
    margin-inline: auto;
    /* الباقة المميزة بتكبر شوية، والـalign-items بيمنع الكارت التاني إنه
       يتمطّط معاها ويلغي الفرق. */
    align-items: start;
}

.mk-plan {
    position: relative;
    padding: 30px 26px;
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-radius);
    background: var(--mk-surface);
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.mk-plan-featured {
    border-color: rgba(99, 102, 241, 0.55);
    background: linear-gradient(180deg, rgba(99, 102, 241, 0.11), var(--mk-surface) 42%);
    box-shadow: var(--mk-shadow);
}

.mk-plan-badge {
    position: absolute;
    inset-block-start: -13px;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    padding: 4px 15px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--mk-primary), var(--mk-secondary));
    color: #fff;
    font-size: 0.78rem;
    font-weight: 800;
    white-space: nowrap;
}
/* ⚠️ الترجمة بالنسبة على المحور الأفقي بتتقلب مع RTL: عنصر متمركز بـ
   `inset-inline-start: 50%` في صفحة عربي محتاج يتحرك ناحية اليمين.
   بدون السطر ده الشارة بتطلع بره الكارت في العربي. */
[dir="rtl"] .mk-plan-badge { transform: translateX(50%); }

.mk-plan h3 { margin-block-end: 2px; }
.mk-plan-desc { color: var(--mk-muted); font-size: 0.93rem; margin-block-end: 12px; }

.mk-price { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; margin-block: 6px; }
.mk-price-now { font-size: clamp(1.8rem, 4vw, 2.4rem); font-weight: 800; letter-spacing: -0.02em; }
.mk-price-was { color: var(--mk-muted); text-decoration: line-through; font-size: 1rem; }
.mk-price-cycle { color: var(--mk-muted); font-size: 0.92rem; }

.mk-plan-save {
    display: inline-block;
    margin-block: 8px;
    padding: 5px 13px;
    border-radius: 999px;
    background: rgba(52, 211, 153, 0.13);
    color: var(--mk-success);
    font-size: 0.88rem;
    font-weight: 700;
}

.mk-plan-list { list-style: none; margin: 14px 0 20px; padding: 0; display: grid; gap: 9px; }
.mk-plan-list li { display: flex; gap: 9px; align-items: flex-start; font-size: 0.95rem; color: var(--mk-muted); }
.mk-plan-list svg { inline-size: 17px; block-size: 17px; flex: none; margin-block-start: 4px; color: var(--mk-success); }

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

.mk-pricing-note { text-align: center; color: var(--mk-muted); font-size: 0.93rem; margin-block-start: 22px; }

/* ===================================================================
   التجربة
   =================================================================== */
.mk-trial {
    max-inline-size: 720px;
    margin-inline: auto;
    padding: 30px 28px;
    border: 1px solid rgba(52, 211, 153, 0.3);
    border-radius: var(--mk-radius);
    background: rgba(52, 211, 153, 0.06);
}
.mk-trial ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.mk-trial li { display: flex; gap: 10px; align-items: flex-start; color: var(--mk-muted); }
.mk-trial svg { inline-size: 18px; block-size: 18px; flex: none; margin-block-start: 5px; color: var(--mk-success); }

/* ===================================================================
   الأسئلة الشائعة — <details> أصلي، صفر جافاسكريبت
   =================================================================== */
.mk-faq { max-inline-size: 780px; margin-inline: auto; display: grid; gap: 10px; }

.mk-faq details {
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-radius-sm);
    background: var(--mk-surface);
    overflow: hidden;
}
.mk-faq summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 17px 20px;
    cursor: pointer;
    font-weight: 700;
    list-style: none;
}
.mk-faq summary::-webkit-details-marker { display: none; }
.mk-faq summary::after {
    content: '+';
    margin-inline-start: auto;
    font-size: 1.35rem;
    font-weight: 400;
    line-height: 1;
    color: var(--mk-primary-text);
    flex: none;
}
.mk-faq details[open] summary::after { content: '−'; }
.mk-faq details[open] summary { border-block-end: 1px solid var(--mk-border); }
.mk-faq-answer { padding: 16px 20px; color: var(--mk-muted); font-size: 0.97rem; }
.mk-faq-answer p { margin: 0; }

/* ===================================================================
   الدعوة الأخيرة
   =================================================================== */
.mk-cta {
    text-align: center;
    padding: clamp(38px, 6vw, 64px) 26px;
    border: 1px solid rgba(99, 102, 241, 0.34);
    border-radius: 22px;
    background:
        radial-gradient(700px 300px at 50% 0%, rgba(99, 102, 241, 0.22), transparent 70%),
        var(--mk-surface);
}
.mk-cta p { color: var(--mk-muted); max-inline-size: 560px; margin-inline: auto; }
.mk-cta-note { font-size: 0.9rem; margin-block-start: 14px; }

/* ===================================================================
   النصوص القانونية
   =================================================================== */
.mk-legal { max-inline-size: 760px; margin-inline: auto; }
.mk-legal h2 { font-size: 1.25rem; margin-block: 34px 10px; }
.mk-legal p { color: var(--mk-muted); }
.mk-legal-updated { color: var(--mk-muted); font-size: 0.92rem; }

/* ===================================================================
   الفوتر
   =================================================================== */
.mk-footer {
    padding-block: 48px 30px;
    border-block-start: 1px solid var(--mk-border);
    background: rgba(2, 6, 23, 0.4);
}
.mk-footer-grid { display: grid; gap: 30px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.mk-footer h4 { margin: 0 0 12px; font-size: 0.92rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--mk-muted); }
.mk-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.mk-footer a { color: var(--mk-text); font-size: 0.95rem; }
.mk-footer-tagline { color: var(--mk-muted); font-size: 0.95rem; max-inline-size: 300px; }
.mk-footer-bottom {
    margin-block-start: 34px;
    padding-block-start: 20px;
    border-block-start: 1px solid var(--mk-border);
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
    color: var(--mk-muted);
    font-size: 0.88rem;
}