/* ============================================================
   دوميرا التقنية — أنماط الصفحات الداخلية

   صفحة الهبوط تحمل أنماطها في جسدها لأنها **صفحة واحدة**. أما هذه
   فتسع صفحات تتقاسم تصميما واحدا، فتقاسم ملف واحد يوفر نحو
   ثمانين كيلوبايتا من التكرار ويحمل مرة واحدة للزائر كله.

   ولا مجسم هنا ولا حقل جسيمات: هذه صفحات **قراءة**. غايتها أن
   تفهرس وتقرأ سريعا، لا أن تبهر. فوزنها مجتمعة أقل من صورة واحدة.
   ============================================================ */

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

:root {
    --brand: #38BDF8;
    --brand-2: #6366F1;

    --t-d1: clamp(2rem, 1rem + 3.6vw, 3.6rem);
    --t-d2: clamp(1.5rem, 1rem + 1.8vw, 2.25rem);
    --t-h3: clamp(1.1rem, 1rem + 0.5vw, 1.35rem);
    --t-lead: clamp(1.02rem, 0.95rem + 0.5vw, 1.3rem);
    --t-body: 1rem;
    --t-sm: 0.875rem;
    --t-xs: 0.78rem;

    --gut: clamp(1.15rem, 0.4rem + 3.4vw, 4.5rem);
    --sec: clamp(3.5rem, 2rem + 6vw, 7rem);
    --r-lg: 28px;
    --r-md: 20px;
    --r-sm: 14px;

    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    --maxw: 1180px;
}

[data-theme="dark"] {
    --bg: #05080F;
    --bg-2: #080D18;
    --panel: rgba(255, 255, 255, 0.035);
    --panel-2: rgba(255, 255, 255, 0.055);
    --line: rgba(255, 255, 255, 0.09);
    --line-2: rgba(255, 255, 255, 0.05);
    --ink: #FFFFFF;
    --ink-2: #B5C2D6;
    --ink-3: #7C8AA1;
    --ink-4: #5A667B;
    --accent: #38BDF8;
    --on-accent: #05080F;
    --solid: #FFFFFF;
    --on-solid: #05080F;
    --mesh: 56, 189, 248;
    --mesh-2: 99, 102, 241;
    --glow: 0.7;
    color-scheme: dark;
}

[data-theme="light"] {
    --bg: #F2F6FB;
    --bg-2: #FFFFFF;
    --panel: rgba(11, 18, 32, 0.028);
    --panel-2: rgba(11, 18, 32, 0.05);
    --line: rgba(11, 18, 32, 0.11);
    --line-2: rgba(11, 18, 32, 0.06);
    --ink: #070C16;
    --ink-2: #3B4A61;
    --ink-3: #64748B;
    --ink-4: #94A3B8;
    --accent: #0369A1;
    --on-accent: #FFFFFF;
    --solid: #070C16;
    --on-solid: #FFFFFF;
    --mesh: 14, 165, 233;
    --mesh-2: 79, 70, 229;
    --glow: 0.32;
    color-scheme: light;
}

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink-2);
    font-family: 'IBM Plex Sans Arabic', system-ui, sans-serif;
    font-size: var(--t-body);
    line-height: 1.85;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* التباعد عربي لا لاتيني: النزول عميق والتشكيل فوق السطر */
h1, h2, h3, h4 { color: var(--ink); margin: 0; line-height: 1.32; letter-spacing: -0.035em; font-weight: 600; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, summary:focus-visible {
    outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px;
}

.lat { font-family: 'IBM Plex Sans', system-ui, sans-serif; direction: ltr; unicode-bidi: isolate; }
.num { font-variant-numeric: tabular-nums; }

/* وهج ثابت خافت: يمنع الأرض الداكنة من أن تقرأ مسطحة */
.glow { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; opacity: var(--glow); }

.glow i {
    position: absolute; display: block; border-radius: 50%;
    inline-size: 70vmax; aspect-ratio: 1.2;
    inset-block-start: -34vmax; inset-inline-start: -16vmax;
    background: radial-gradient(circle at 50% 50%,
        rgba(var(--mesh), 0.26) 0%, rgba(var(--mesh), 0.08) 34%, transparent 68%);
}

.glow i + i {
    inset-block-start: auto; inset-inline-start: auto;
    inset-block-end: -30vmax; inset-inline-end: -14vmax;
    inline-size: 58vmax; aspect-ratio: 1;
    background: radial-gradient(circle at 50% 50%,
        rgba(var(--mesh-2), 0.22) 0%, rgba(var(--mesh-2), 0.07) 36%, transparent 70%);
}

header, main, footer { position: relative; z-index: 1; }
.wrap { inline-size: min(100% - var(--gut) * 2, var(--maxw)); margin-inline: auto; }

/* ============================================================
   الترويسة
   ============================================================ */
.top {
    position: sticky; inset-block-start: 0; z-index: 60;
    background: color-mix(in oklab, var(--bg) 82%, transparent);
    backdrop-filter: blur(14px);
    border-block-end: 1px solid var(--line-2);
}

.top-in {
    display: flex; align-items: center; gap: 14px;
    padding-block: 12px;
}

.mark { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); }
.mark svg { inline-size: 30px; block-size: 30px; color: var(--accent); flex: none; }
.mark b { font-size: 0.98rem; font-weight: 700; letter-spacing: -0.02em; display: block; line-height: 1.2; }
.mark i { font-size: 0.56rem; font-style: normal; color: var(--ink-4); letter-spacing: 0.14em; text-transform: uppercase; display: block; }

/* أنماط التنقل العلوي انتقلت إلى nav-mobile.css بمحدد الصنف .top-nav.
   المحدد العنصري .top nav كان يطابق قائمة الجوال أيضا — وهي داخل .top —
   فيخفيها بأعلى أولوية ولا يبقى للزائر تنقل على الجوال أصلا. */

.top-cta { margin-inline-start: auto; }
@media (min-width: 900px) { .top-cta { margin-inline-start: 8px; } }

/* ============================================================
   الأزرار
   ============================================================ */
.btn {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 12px 22px; border-radius: 999px;
    font-size: var(--t-sm); font-weight: 500; border: 1px solid transparent;
    transition: transform 300ms var(--ease), background 250ms, border-color 250ms, color 250ms;
}
.btn:hover { transform: translateY(-2px); }
.btn svg { inline-size: 17px; block-size: 17px; flex: none; }

.btn-solid { background: var(--solid); color: var(--on-solid); }
.btn-solid:hover { background: var(--accent); color: var(--on-accent); }
.btn-ghost { border-color: var(--line); color: var(--ink); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn-lg { padding: 15px 28px; font-size: var(--t-body); }

/* ============================================================
   فتات الطريق ورأس الصفحة
   ============================================================ */
.crumb { padding-block-start: clamp(1.6rem, 4vw, 3rem); font-size: var(--t-xs); color: var(--ink-4); }
.crumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.crumb a { color: var(--ink-3); }
.crumb a:hover { color: var(--accent); }
.crumb li:not(:last-child)::after { content: "/"; margin-inline-start: 8px; color: var(--ink-4); }
.crumb [aria-current] { color: var(--ink-2); }

.head { padding-block: clamp(1.5rem, 3vw, 2.5rem) var(--sec); }
.eyebrow {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 7px 15px; border-radius: 999px;
    border: 1px solid var(--line); background: var(--panel);
    font-size: var(--t-xs); color: var(--ink-3); margin-block-end: 22px;
}
.eyebrow s { inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--accent); text-decoration: none; flex: none; }

.head h1 { font-size: var(--t-d1); line-height: 1.18; letter-spacing: -0.045em; max-inline-size: 20ch; text-wrap: balance; }
.head h1 b { font-weight: 600; color: var(--accent); }

.head .lead {
    margin-block-start: 24px; font-size: var(--t-lead); font-weight: 300;
    color: var(--ink-2); max-inline-size: 62ch; line-height: 1.75; text-wrap: pretty;
}

.head .acts { display: flex; flex-wrap: wrap; gap: 12px; margin-block-start: 34px; }

/* ============================================================
   الأقسام
   ============================================================ */
.sec { padding-block-end: var(--sec); }
.sec > h2 { font-size: var(--t-d2); letter-spacing: -0.035em; max-inline-size: 22ch; margin-block-end: 12px; }
.sec > .note { color: var(--ink-3); font-weight: 300; max-inline-size: 58ch; margin-block-end: clamp(1.6rem, 3vw, 2.6rem); }

.panel {
    border: 1px solid var(--line); border-radius: var(--r-md);
    background: var(--panel); padding: clamp(1.2rem, 2.4vw, 1.9rem);
}

.grid { display: grid; gap: clamp(0.9rem, 1.8vw, 1.25rem); }
@media (min-width: 720px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }
/* المراحل **خمس** لا أربع: شبكة رباعية تترك الخامسة وحيدة في صف
   خاص وتفتح فراغا بعرض ثلاث بطاقات. فالسلم 1 → 2 → 3 → 5. */
@media (min-width: 560px) { .grid-5 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 840px) { .grid-5 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1150px) { .grid-5 { grid-template-columns: repeat(5, 1fr); } }

/* قائمة ما تحصل عليه */
.gets li {
    display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start;
    padding-block: 14px; border-block-end: 1px solid var(--line-2);
}
.gets li:last-child { border-block-end: 0; }
.gets svg { inline-size: 19px; block-size: 19px; color: var(--accent); margin-block-start: 5px; flex: none; }
.gets b { color: var(--ink); font-weight: 500; }
.gets span { color: var(--ink-2); font-weight: 300; }

/* المراحل */
.steps li { counter-increment: s; }
.steps { counter-reset: s; }
.steps em {
    font-style: normal; font-family: 'IBM Plex Sans', monospace; direction: ltr;
    display: block; font-size: var(--t-xs); color: var(--accent); letter-spacing: 0.1em; margin-block-end: 10px;
}
.steps b { display: block; color: var(--ink); font-size: var(--t-h3); font-weight: 600; margin-block-end: 8px; }
.steps p { color: var(--ink-3); font-size: var(--t-sm); font-weight: 300; line-height: 1.8; }

/* القطاعات */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chips span {
    padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line);
    background: var(--panel); font-size: var(--t-sm); color: var(--ink-2);
}

/* الأسئلة */
.qa details {
    border-block-end: 1px solid var(--line-2);
}
.qa summary {
    cursor: pointer; list-style: none; padding-block: 20px;
    display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center;
    color: var(--ink); font-size: var(--t-h3); font-weight: 500; line-height: 1.5;
}
.qa summary::-webkit-details-marker { display: none; }
/* الحد **مادي** لا منطقي: `border-inline-end` ينقلب مع اتجاه
   الصفحة، فيصير السهم في العربية مشيرا إلى الجانب لا إلى الأسفل. */
.qa summary::after {
    content: ""; inline-size: 11px; block-size: 11px; flex: none;
    border-right: 2px solid var(--ink-4); border-bottom: 2px solid var(--ink-4);
    transform: rotate(45deg) translateY(-3px); transition: transform 300ms var(--ease);
}
.qa details[open] summary::after { transform: rotate(225deg) translateY(-3px); }
.qa details > p {
    padding-block-end: 22px; color: var(--ink-3); font-weight: 300;
    max-inline-size: 68ch; margin-block-start: -4px;
}

/* نداء للفعل */
.cta {
    border: 1px solid var(--line); border-radius: var(--r-lg);
    background:
        radial-gradient(70% 120% at 50% 0%, rgba(var(--mesh), 0.13), transparent 70%),
        var(--panel);
    padding: clamp(2rem, 5vw, 4rem); text-align: center;
}
.cta h2 { font-size: var(--t-d2); letter-spacing: -0.035em; max-inline-size: 22ch; margin-inline: auto; }
.cta p { margin-block-start: 16px; color: var(--ink-3); font-weight: 300; max-inline-size: 52ch; margin-inline: auto; }
.cta .acts { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-block-start: 30px; }

/* خدمات أخرى */
.more a {
    display: block; border: 1px solid var(--line); border-radius: var(--r-md);
    background: var(--panel); padding: 20px 22px;
    transition: border-color 250ms, transform 300ms var(--ease), background 250ms;
}
.more a:hover { border-color: color-mix(in oklab, var(--accent) 55%, transparent); transform: translateY(-3px); background: var(--panel-2); }
.more em { font-style: normal; font-family: 'IBM Plex Sans', monospace; direction: ltr; display: block; font-size: var(--t-xs); color: var(--ink-4); letter-spacing: 0.1em; }
.more b { display: block; color: var(--ink); font-size: var(--t-h3); font-weight: 600; margin-block: 8px 6px; }
.more span { color: var(--ink-3); font-size: var(--t-sm); font-weight: 300; line-height: 1.75; }

/* ============================================================
   التذييل
   ============================================================ */
footer { border-block-start: 1px solid var(--line-2); padding-block: clamp(2.5rem, 5vw, 4rem); }
.foot { display: grid; gap: clamp(1.8rem, 4vw, 3rem); }
@media (min-width: 860px) { .foot { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); } }
.foot-note { color: var(--ink-3); font-size: var(--t-sm); font-weight: 300; max-inline-size: 40ch; margin-block-start: 16px; }
.foot nav { display: grid; gap: 10px; align-content: start; }
.foot nav a { color: var(--ink-3); font-size: var(--t-sm); }
.foot nav a:hover { color: var(--accent); }
.foot-id { display: grid; gap: 10px; align-content: start; color: var(--ink-3); font-size: var(--t-sm); }
.foot-id b { color: var(--ink-2); font-weight: 500; }

/* زر الوضع */
.icon-btn {
    inline-size: 38px; block-size: 38px; flex: none;
    display: inline-grid; place-items: center; border-radius: 50%;
    border: 1px solid var(--line); background: var(--panel); color: var(--ink-2);
    cursor: pointer; transition: color 200ms, border-color 200ms;
}
.icon-btn:hover { color: var(--accent); border-color: var(--accent); }
.icon-btn svg { inline-size: 17px; block-size: 17px; }
[data-theme="dark"] .i-sun { display: block; }
[data-theme="dark"] .i-moon { display: none; }
[data-theme="light"] .i-sun { display: none; }
[data-theme="light"] .i-moon { display: block; }

/* ============================================================
   الظهور عند التمرير — يلغى مع تفضيل تقليل الحركة
   ============================================================ */
.rise { opacity: 0; transform: translateY(22px); transition: opacity 800ms var(--ease), transform 800ms var(--ease); }
.rise.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rise { opacity: 1; transform: none; transition: none; } }

/* الطباعة: الورقة لا تحتاج وهجا ولا ترويسة لاصقة */
@media print {
    .glow, .top, .cta, .more { display: none; }
    body { background: #fff; color: #000; }
}