/* أكاديمية العدل جروب — أنماط الموقع */

:root{
  /* أسود عميق — مش أسود مزرقّ. ده أساس إحساس الـ VIP. */
  --ink:#050506;
  --panel:#0C0C0E;
  --panel-2:#131316;
  /* الحدود شعرة شفافة مش خط رمادي مصمت — بتتكيّف مع أي خلفية تحتها */
  --line:rgba(255,255,255,.075);
  --line-hi:rgba(201,162,74,.42);
  --bone:#F2EFE9;
  --muted:#8E8B85;

  /* الذهب — بديل التنجستن. #C9A24A هو اللون الأساسي، و#D9BE79 للنص الصغير عشان التباين */
  --gold:#C9A24A;
  --gold-text:#D9BE79;
  --gold-deep:#7A5A11;          /* للأقسام الفاتحة */
  --gold-grad:linear-gradient(100deg,#A87C2A 0%,#F3E2AC 40%,#C9A24A 62%,#EFDCA2 100%);
  --sheen:linear-gradient(90deg,transparent,rgba(233,207,150,.22),transparent);
  --rule:linear-gradient(90deg,rgba(201,162,74,.5),transparent);
  --card:linear-gradient(180deg,#0F0F11,#0A0A0C);
  --card-hi:linear-gradient(180deg,#151517,#0E0E10);

  /* أسماء قديمة متسيبة عشان الكود القديم ميكسرش */
  --tungsten:var(--gold-text);
  --tungsten-deep:var(--gold-deep);

  /* أحمر العدل جروب — مسحوب بالعيّنة من ملف اللوجو نفسه (assets/ag-mark.png).
     محجوز للزرار الأساسي واللوجو بس: حاجة حمرا واحدة في كل شاشة. */
  --brand:#3E160C;       /* «Rough» — بني محمر غامق، بديل الأحمر */
  --brand-lit:#5C2211;   /* للـ hover */
  --brand-deep:#2A0F08;
  /* الأقسام الفاتحة بقت عاجي دافي بدل الرمادي المزرقّ — عشان تمشي مع الذهب */
  --day:#EFEBE3;
  --day-2:#E4DFD5;
  --day-line:#D3CCBE;
  --day-muted:#54504A;

  --f-display:"Tajawal", system-ui, sans-serif;
  --f-body:"Tajawal", system-ui, sans-serif;
  /* ⚠️ IBM Plex Mono مافيهوش حروف عربية. من غير Tajawal في القايمة، أي نص عربي
     بخط المونو كان بيقع على مونوسبيس النظام (Consolas) وشكله وحش.
     المتصفح بيختار الخط لكل حرف لوحده: اللاتيني ياخد Plex Mono والعربي ياخد Tajawal. */
  --f-mono:"IBM Plex Mono", "Tajawal", ui-monospace, monospace;

  --wrap:1180px;
  /* هوامش جانبية أوسع — المساحة الفاضية هي أهم إشارة فخامة */
  --gut:clamp(24px,6.5vw,92px);
  --ease:cubic-bezier(.22,.61,.36,1);
}
/* النسخة الإنجليزية: نفس التوكنز، خطوط لاتينية.
   الكود كله مكتوب بخصائص منطقية (inset-inline / padding-inline)
   فالاتجاه بيتقلب لوحده — ده بيظبط الطباعة بس. */
[dir="ltr"]{
  --f-display:"Archivo", system-ui, sans-serif;
  --f-body:"IBM Plex Sans", system-ui, sans-serif;
}
[dir="ltr"] .d1{letter-spacing:-.028em}
[dir="ltr"] .d2,[dir="ltr"] .d3{letter-spacing:-.015em}
[dir="ltr"] body{line-height:1.68}
[dir="ltr"] .lead{line-height:1.72}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--ink);color:var(--bone);font-family:var(--f-body);font-weight:400;line-height:1.8;-webkit-font-smoothing:antialiased;overflow-x:hidden}

/* حبيبات فيلم — طبقة ضوضاء خفيفة جدًا فوق الصفحة كلها.
   بتكسر «نظافة» الشاشة وبتدّي إحساس خامة مصوّرة. مناسبة لأكاديمية سينما تحديدًا. */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media(prefers-reduced-motion:reduce){body::after{opacity:.03}}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
:focus-visible{outline:2px solid var(--tungsten);outline-offset:3px;border-radius:2px}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}

/* تخطّي للمحتوى — بيظهر أول ما تدوس Tab، ومخفي غير كده */
.skip-link{position:absolute;inset-inline-start:-9999px;top:0;z-index:200;
  background:var(--brand);color:#fff;padding:12px 22px;font-weight:700;font-size:.95rem;border:1px solid rgba(201,162,74,.55);border-radius:0 0 2px 0}
.skip-link:focus{inset-inline-start:0}

/* السلّم: ٨٦ / ٤٦ / ٢٨ / ٢١ — نِسَبه منتظمة (1.87 / 1.64 / 1.33).
   قبل كده كانت القفزة من d2 لـ d3 ضعفين وربع وده كان بيخلي العناوين الفرعية تايهة. */
.d1{font-family:var(--f-display);font-weight:800;font-size:clamp(2.5rem,7vw,5.4rem);line-height:1.13;letter-spacing:-.024em}
.d2{font-family:var(--f-display);font-weight:700;font-size:clamp(1.8rem,3.9vw,2.9rem);line-height:1.24;letter-spacing:-.016em}
.d3{font-family:var(--f-display);font-weight:700;font-size:clamp(1.32rem,2.1vw,1.75rem);line-height:1.38;letter-spacing:-.008em}
/* text-wrap:pretty بيمنع إن كلمة واحدة تقع لوحدها في آخر سطر.
   المتصفح اللي مش داعمها بيتجاهلها — مفيش أي كسر. */
.lead{font-size:clamp(1.08rem,1.5vw,1.32rem);font-weight:300;color:var(--muted);max-width:54ch;line-height:1.95;text-wrap:pretty}

/* نص بتدرّج معدني — بيتقرا كذهب حقيقي مش أصفر مسطّح */
.gold-text,.hero h1 .lit{
  background:var(--gold-grad);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
}
.is-day .gold-text,.is-day .hero h1 .lit{background:none;color:var(--gold-deep)}
.sm{font-size:1rem;color:var(--muted);line-height:1.85}
.mono{font-family:var(--f-mono);letter-spacing:.06em}

/* ⚠️ تباعد الحروف بيكسر اتصال الخط العربي — لازم يتشال من التسميات العربية.
   التسميات اللاتينية (TRACK 01، PRODUCTION...) بياخدوا lang="en" من app.js
   فبيحتفظوا بتباعدهم الواسع. */
[dir="rtl"] .stage .st-meta dt:not([lang="en"]),
[dir="rtl"] .plan .tag:not([lang="en"]),
[dir="rtl"] .fac .role:not([lang="en"]),
[dir="rtl"] .field label:not([lang="en"]),
[dir="rtl"] footer h4:not([lang="en"]),
[dir="rtl"] .frame .idx:not([lang="en"]),
[dir="rtl"] .frame .more:not([lang="en"]),
[dir="rtl"] .outs .n:not([lang="en"]),
[dir="rtl"] .g3 .num:not([lang="en"]),
[dir="rtl"] .tdetail-h .idx:not([lang="en"]),
[dir="rtl"] .slate dd,
[dir="rtl"] .crumb{letter-spacing:0}

/* الحاوية بخط النص العادي وبدون تباعد — عشان الجزء العربي يطلع سليم.
   الجزء اللاتيني جوّاها بس هو اللي بياخد المونو والتباعد الواسع. */
.slug{display:flex;align-items:center;gap:11px;font-family:var(--f-body);font-weight:500;font-size:.86rem;letter-spacing:0;color:var(--gold-text);margin-bottom:24px}
.slug [lang="en"]{font-family:var(--f-mono);font-weight:300;font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;opacity:.85;white-space:nowrap}
.slug .slug-ar{letter-spacing:0}
.slug::after{content:"";flex:1;height:1px;background:var(--rule)}
.is-day .slug{color:var(--gold-deep)}
.is-day .slug::after{background:linear-gradient(90deg,rgba(122,90,17,.45),transparent)}

header{position:sticky;top:0;z-index:60;background:rgba(12,14,19,.86);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;gap:20px;height:76px}
.logo{display:flex;align-items:center;gap:11px;flex-shrink:0}
/* لوجو AG الحقيقي — نسبة الصورة 250×180 */
.logo .mark{height:32px;width:auto;flex-shrink:0;display:block}
.logo b{font-family:var(--f-display);font-weight:800;font-size:1rem;letter-spacing:-.01em;display:block}
.logo em{display:block;font-family:var(--f-mono);font-style:normal;font-size:.56rem;letter-spacing:.22em;color:var(--muted);margin-top:-3px}
nav{display:flex;gap:2px;margin-inline-start:auto;flex-wrap:nowrap}
/* nowrap ضروري — تسميات الفصحى أطول من العامية وكانت بتلف على سطرين */
nav a{padding:9px 12px;font-size:.92rem;font-weight:500;color:var(--muted);white-space:nowrap;border-radius:3px;transition:color .45s var(--ease),background .45s var(--ease)}
nav a:hover{color:var(--bone);background:var(--panel)}
nav a.on{color:var(--tungsten)}

/* مبدّل اللغة */
.lang{display:inline-grid;place-items:center;min-width:38px;height:34px;padding:0 10px;flex-shrink:0;
  border:1px solid var(--line);font-family:var(--f-mono);font-size:.72rem;letter-spacing:.1em;
  color:var(--muted);border-radius:2px;transition:color .18s,border-color .18s}
.lang:hover{color:var(--tungsten);border-color:var(--tungsten)}
.bar .lang{margin-inline-start:8px}

.btn{display:inline-flex;align-items:center;gap:9px;padding:14px 28px;font-weight:700;font-size:.95rem;letter-spacing:.02em;white-space:nowrap;border-radius:1px;transition:transform .2s,background .22s,color .22s,border-color .22s}
/* الـ brand غامق قوي (1.3:1 على الخلفية) فالزرار لوحده مش هيبان —
   الحد الدهبي الشعرة هو اللي بيدّيه حواف ويخلّيه يتقرا كزرار. */
.btn-key{background:var(--brand);color:#fff;border:1px solid rgba(201,162,74,.55)}
.btn-key:hover{background:var(--brand-lit);border-color:var(--gold);transform:translateY(-1px)}
.btn-ghost{border:1px solid var(--line-hi);color:var(--bone)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold-text)}
.is-day .btn-ghost{border-color:var(--day-line);color:#141210}
.is-day .btn-ghost:hover{border-color:var(--gold-deep);color:var(--gold-deep)}
.btn-sm{padding:9px 18px;font-size:.87rem}

.burger{display:none;width:40px;height:40px;place-items:center;margin-inline-start:auto}
.burger i{display:block;width:19px;height:1.5px;background:var(--bone);position:relative}
.burger i::before,.burger i::after{content:"";position:absolute;inset-inline:0;height:1.5px;background:var(--bone)}
.burger i::before{top:-6px}.burger i::after{top:6px}

.page{display:none}
/* الحركة بطيئة عن قصد — السرعة إحساس «تطبيق»، والبطء إحساس فخامة */
.page.live{display:block;animation:fade .85s var(--ease)}
@keyframes fade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ظهور تدريجي مع النزول — بيتحط بـ app.js */
.rise{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rise.seen{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rise{opacity:1;transform:none;transition:none}}
/* المسافات اتضاعفت تقريبًا — ده اللي بيخلي الصفحة «تتنفّس» */
section{padding:clamp(88px,13vw,196px) 0}
/* الانتقال من الأسود للعاجي كان قطع مفاجئ — التدرّج ده بيخليه ناعم */
.is-day{background:var(--day);color:#141210;position:relative}
.is-day::before{content:"";position:absolute;inset-inline:0;top:-70px;height:70px;
  background:linear-gradient(180deg,transparent,var(--day));pointer-events:none}
.is-day .lead,.is-day .sm{color:var(--day-muted)}
.is-day .d1,.is-day .d2,.is-day .d3{color:var(--ink)}

.hero{position:relative;padding:clamp(74px,11vw,128px) 0 0;border-bottom:1px solid var(--line);overflow:hidden}
.hero::before{content:"";position:absolute;top:-44%;inset-inline-end:-14%;width:min(900px,105vw);aspect-ratio:1;background:radial-gradient(circle,rgba(201,162,74,.13),rgba(201,162,74,.04) 42%,transparent 66%);pointer-events:none}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 -130px 140px -85px rgba(0,0,0,.92)}
.hero .wrap{position:relative;z-index:2}
.hero-kicker{display:inline-flex;align-items:center;gap:11px;font-family:var(--f-mono);font-weight:300;font-size:.7rem;letter-spacing:.28em;color:var(--gold-text);border:1px solid var(--line-hi);padding:9px 18px;margin-bottom:32px}
.hero-kicker em{width:6px;height:6px;background:var(--gold);border-radius:50%;animation:blink 2.6s infinite;font-style:normal}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
/* الهيرو بارتفاع الشاشة، والمحتوى في النص */
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center}

/* اللوجو الكبير جنب عمود الكلام كله — لازم كل النصوص تبدأ من نفس الحافة،
   لو العنوان بس جنب اللوجو بتحصل إزاحة بين العنوان والفقرة اللي تحته. */
/* flex-start مش center — عشان اللوجو يقف جنب العنوان نفسه مش جنب الفقرة */
.hero-head{display:flex;align-items:flex-start;gap:clamp(26px,4vw,64px);margin-bottom:clamp(34px,4.5vw,58px)}
.hero-mark{width:clamp(104px,13.5vw,208px);height:auto;flex:none;display:block}
.hero-copy{flex:1;min-width:0}
.hero-copy > *:last-child{margin-bottom:0}

.hero h1{max-width:15ch;margin-bottom:22px}
.hero h1 .lit{color:var(--tungsten)}
.hero .sub{font-family:var(--f-display);font-weight:600;font-size:clamp(1.05rem,1.9vw,1.4rem);color:var(--bone);max-width:38ch;margin-bottom:20px;line-height:1.55;text-wrap:balance}
.hero .lead{text-wrap:balance}
.hero .lead{margin-bottom:40px}
.hero-cta{display:flex;flex-wrap:wrap;gap:13px;margin-bottom:clamp(54px,8vw,88px)}

.slate{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-bottom:0;background:var(--card);position:relative}
.slate::before{content:"";position:absolute;inset-inline:0;top:0;height:1px;background:var(--sheen)}
.slate div{padding:20px 22px;border-inline-start:1px solid var(--line)}
.slate div:first-child{border-inline-start:0}
.slate dt{font-family:var(--f-mono);font-weight:300;font-size:.66rem;letter-spacing:.26em;color:var(--muted);margin-bottom:7px;display:block}
.slate dd{font-family:var(--f-display);font-weight:700;font-size:1rem}
.slate .go{color:var(--gold-text)}

/* أعمدة مفتوحة — من غير حدود ولا خلفيات. الفصل بالمسافة مش بالخط. */
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(34px,5vw,76px);background:none;border:0}
.g3 > div{background:none;padding:0}
.is-day .g3,.is-day .g3 > div{background:none;border:0}
.g3 h3{margin:18px 0 14px}
.g3 p{color:var(--muted);font-size:1.06rem;line-height:1.9}
.is-day .g3 p{color:var(--day-muted)}
.g3 .num{font-family:var(--f-mono);font-weight:300;font-size:.78rem;color:var(--muted);letter-spacing:.24em}
.is-day .g3 .num{color:var(--day-muted)}

.strip{position:relative;margin-top:46px}
.perf{display:flex;gap:12px;padding:9px 0;justify-content:space-between}
/* التقوب كانت تباينها 1.35:1 يعني مش موجودة عمليًا بعد ما بقينا على أسود عميق.
   دلوقتي فاتحة عشان الشريط يقرا كشريط فيلم فعلًا. */
.perf i{flex:1;height:13px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.17);border-radius:2px}
.is-day .perf i{background:rgba(0,0,0,.08);border-color:rgba(0,0,0,.16)}
.frames{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.frame{position:relative;background:var(--card);border:1px solid var(--line);padding:38px 30px 30px;min-height:288px;display:flex;flex-direction:column;transition:background .6s var(--ease),border-color .6s var(--ease),transform .6s var(--ease)}
/* لمعة رفيعة على حرف الكارت من فوق — دي أكتر حاجة بتدّي إحساس الخامة */
.frame::before{content:"";position:absolute;inset-inline:0;top:0;height:1px;background:var(--sheen)}
.frame:hover,.frame:focus-within{background:var(--card-hi);border-color:var(--line-hi);transform:translateY(-3px)}
/* رقم المسار رمادي — بيبقى دهبي عند الوقوف على الكارت بس.
   الذهب قيمته إنه نادر؛ لو موجود في كل حتة بيبقى لون عادي. */
.frame .idx{font-family:var(--f-mono);font-weight:300;font-size:.72rem;color:var(--muted);letter-spacing:.26em;margin-bottom:auto;transition:color .55s var(--ease)}
.frame:hover .idx,.frame:focus-within .idx{color:var(--gold-text)}
/* عنوان الكارت أصغر من d3 العام — الكارت عرضه ~٢٤٠px فالمقاس الكامل بيوصل ٣ سطور */
.frame h3{margin:0 0 12px;font-size:clamp(1.1rem,1.32vw,1.28rem);line-height:1.4}
.frame p{font-size:1.02rem;color:var(--muted);margin-bottom:20px;line-height:1.85}
.frame .more{font-family:var(--f-mono);font-size:.72rem;color:var(--muted);letter-spacing:.2em;transition:color .55s var(--ease)}
.frame:hover .more,.frame:focus-within .more{color:var(--gold-text)}

/* المراحل بقت صفوف مفصولة بخط شعرة بدل صناديق */
.stages{display:grid;gap:0;background:none;border:0;margin-top:56px}
.stage{background:none;display:grid;grid-template-columns:120px 1fr 260px;gap:clamp(24px,3.4vw,56px);padding:clamp(38px,4.4vw,60px) 0;align-items:start;border-top:1px solid var(--day-line)}
.stage:first-child{border-top:0;padding-top:0}
.is-day .stage{border-top-color:var(--day-line)}
.page:not(.is-day) .stage{border-top-color:var(--line)}
.stage .st-n{font-family:var(--f-mono);font-size:2.5rem;font-weight:500;color:var(--tungsten-deep);line-height:1}
.stage h3{margin-bottom:10px}
.stage p{color:var(--day-muted)}
.stage .st-meta{border-inline-start:1px solid var(--day-line);padding-inline-start:22px}
/* #5F6873 القديم كان 4.3:1 — راسب. #565E69 بيوصل 5:1 */
.stage .st-meta dt{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.16em;color:#565E69;margin-bottom:4px}
.stage .st-meta dd{font-weight:600;margin-bottom:14px;font-size:.95rem}

/* minmax أصغر عشان الخمس عناصر تدخل في صف واحد — كانت ٤ أعمدة والخامس بيقع لوحده */
.years{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:clamp(24px,3vw,44px);background:none;border:0;margin-top:60px}
.years div{background:none;padding:0}
.years b{display:block;font-family:var(--f-mono);color:var(--tungsten);font-size:1.14rem;margin-bottom:8px}
.years span{font-size:.93rem;color:var(--muted)}

.band{border-block:1px solid var(--line);background:radial-gradient(700px 300px at 82% 0%,rgba(237,168,69,.12),transparent 70%),var(--panel);text-align:center}
.band .d2{margin-bottom:16px}
.band .lead{margin:0 auto 34px}
.band .hero-cta{justify-content:center;margin-bottom:0}

/* المسارات بقت مفصولة بخط شعرة بدل ما تبقى صناديق */
.tdetail{border:0;border-top:1px solid var(--line);background:none;padding-top:clamp(40px,5vw,68px);margin-bottom:clamp(48px,6vw,84px)}
.tdetail-h{display:flex;flex-wrap:wrap;gap:16px;align-items:baseline;padding:0 0 clamp(24px,3vw,36px)}
.tdetail-h .idx{font-family:var(--f-mono);font-weight:300;color:var(--muted);font-size:.76rem;letter-spacing:.26em}
/* max-width ضروري — من غيره الفقرة بتوصل ١٣٢ حرف في السطر، والمريح للعربي ٤٥–٧٥ */
.tdetail-h p{color:var(--muted);flex-basis:100%;font-size:1.02rem;line-height:1.9;max-width:58ch}
.mods{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(26px,3.4vw,52px);background:none}
.mods div{background:none;padding:0}
.mods b{display:block;font-family:var(--f-display);font-weight:800;margin-bottom:6px;font-size:.98rem}
.mods span{font-size:.9rem;color:var(--muted)}

/* ---------- صفحة المسار الواحد ---------- */
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:9px;font-family:var(--f-mono);font-size:.72rem;letter-spacing:.08em;color:var(--muted);margin-bottom:26px}
.crumb a{color:var(--muted);transition:color .18s}
.crumb a:hover{color:var(--tungsten)}
.crumb span[aria-current]{color:var(--bone)}
.crumb i{font-style:normal;color:#4A5364}

.slate.boxed{border-bottom:1px solid var(--line);margin-top:40px}
.mods.boxed{border:0;margin-top:46px}
.mods.boxed div{padding:0}
.mods.boxed span{line-height:1.75}

.frames.three{grid-template-columns:repeat(3,1fr)}
.frames.three .frame{min-height:196px}

.tdetail-f{margin-top:clamp(30px,3.6vw,46px);padding:0;display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;transition:opacity .5s var(--ease)}
a.tdetail-f:hover{opacity:.72}
a.tdetail-f:hover .more{color:#FFC167}

.outs{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(32px,4.4vw,68px);background:none;border:0;margin-top:52px}
.outs div{background:none;padding:0}
.outs b{display:block;font-family:var(--f-display);font-weight:800;font-size:1.02rem;margin-bottom:7px}
.outs span{font-size:.94rem;color:var(--muted)}
.outs .n{font-family:var(--f-mono);font-weight:300;font-size:.72rem;letter-spacing:.26em;color:var(--muted);display:block;margin-bottom:12px}

.fac{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(28px,3.6vw,56px);background:none;border:0;margin-top:46px}
/* من غير صور: خط شعرة فوق كل كارت بدل مربّع الصورة الفاضي —
   الشكل بيبقى مقصود مش ناقص. */
.fac article{background:none;padding:26px 0 0;min-height:auto;display:flex;flex-direction:column;
  border-top:1px solid var(--line);position:relative}
.fac article::before{content:"";position:absolute;inset-inline-start:0;top:-1px;width:34px;height:1px;background:var(--gold)}
.fac b{font-family:var(--f-display);font-weight:800;font-size:1rem;display:block;margin-bottom:6px}
.fac .role{color:var(--muted);font-family:var(--f-mono);font-weight:300;font-size:.76rem;letter-spacing:.2em;margin-bottom:14px;display:block}
.fac .desc{font-size:.89rem;color:var(--muted);margin-top:auto;display:block}

/* الخطط بقت أعمدة مفتوحة، بينهم خط شعرة بس */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:0;background:none;border:0;margin-top:58px}
.plan{background:none;padding:clamp(30px,3.4vw,46px);display:flex;flex-direction:column;border-inline-start:1px solid var(--line)}
.plan:first-child{border-inline-start:0;padding-inline-start:0}
.plan:last-child{padding-inline-end:0}
.plan.key{position:relative;background:linear-gradient(180deg,rgba(201,162,74,.05),transparent 55%)}
/* الخط اللي فوق كارت الاشتراك السنوي — بالـ brand الغامق كان هيختفي تمامًا (1.2:1)،
   وشغلته الوحيدة إنه يلفت النظر. فبقى ذهبي. */
.plan.key::before{content:"";position:absolute;inset-block-start:0;inset-inline:0;height:2px;background:var(--gold-grad)}
.plan .tag{font-family:var(--f-mono);font-weight:300;font-size:.74rem;letter-spacing:.2em;color:var(--muted);margin-bottom:16px;display:block}
.plan.key .tag{color:var(--gold-text)}
.plan .price{font-family:var(--f-display);font-weight:900;font-size:2.3rem;line-height:1.1;margin:8px 0 4px}
.plan .per{font-size:.86rem;color:var(--muted);margin-bottom:24px}
.plan ul{list-style:none;margin-bottom:30px;display:grid;gap:11px}
.plan li{font-size:.95rem;color:var(--muted);padding-inline-start:20px;position:relative}
.plan li::before{content:"";position:absolute;inset-inline-start:0;top:13px;width:7px;height:1.5px;background:var(--tungsten)}
.plan .btn{margin-top:auto;justify-content:center}

.form{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:38px;max-width:820px}
.field{display:flex;flex-direction:column;gap:8px}
.field.full{grid-column:1/-1}
/* تسميات الفورم عربي — كانت .66rem (١٠.٥px) وده صغير على الموبايل للخط العربي */
.field label{font-family:var(--f-mono);font-size:.78rem;letter-spacing:.1em;color:var(--muted)}
.field input,.field select,.field textarea{background:var(--panel);border:1px solid var(--line);color:var(--bone);padding:13px 15px;font-family:var(--f-body);font-size:.96rem;border-radius:2px}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--tungsten);outline:none}
.field textarea{min-height:118px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:#5C6674}
.field label .req{color:var(--tungsten)}
.field .err{font-size:.82rem;color:#F2705B;min-height:1px}
.field.bad input,.field.bad select,.field.bad textarea{border-color:#F2705B}
.hp{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.form-note{font-size:.84rem;color:var(--muted);margin-top:-4px}
.f-status{grid-column:1/-1;border:1px solid var(--line);background:var(--panel);padding:15px 18px;font-size:.94rem;display:none}
.f-status.show{display:block}
.f-status.ok{border-color:var(--tungsten);color:var(--bone)}
.f-status.ok b{color:var(--tungsten)}
.f-status.no{border-color:#F2705B;color:#F2A398}
.btn[aria-busy="true"]{opacity:.6;pointer-events:none}

.faq{border-top:1px solid var(--day-line);margin-top:40px}
.faq .q{border-bottom:1px solid var(--day-line);padding:24px 0}
.faq .q h3{margin-bottom:10px}
/* نفس السبب — إجابات الأسئلة كانت بتوصل ١٣٠ حرف في السطر */
.faq .q p{color:var(--day-muted);max-width:62ch;font-size:1.04rem;line-height:1.9}

footer{border-top:1px solid var(--line);padding:56px 0 32px;background:var(--panel)}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px;margin-bottom:44px}
footer h4{font-family:var(--f-mono);font-weight:300;font-size:.7rem;letter-spacing:.26em;color:var(--muted);margin-bottom:18px}
footer ul{list-style:none;display:grid;gap:10px}
footer a{color:var(--muted);font-size:.93rem;transition:color .18s}
footer a:hover{color:var(--bone)}
.fbot{border-top:1px solid var(--line);padding-top:24px;display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;font-size:.83rem;color:var(--muted)}

@media(max-width:1000px){
  .slate{grid-template-columns:repeat(2,1fr)}
  .slate div:nth-child(3){border-inline-start:0}
  .slate div:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .g3,.mods{grid-template-columns:1fr}
  .frames,.fac,.frames.three{grid-template-columns:repeat(2,1fr)}
  .plans{grid-template-columns:1fr;gap:0}
  .plan{border-inline-start:0;border-top:1px solid var(--line);padding-inline:0!important;padding-block:clamp(30px,5vw,44px)}
  .plan:first-child{border-top:0;padding-top:0}
  .stage{grid-template-columns:1fr}
  .stage .st-meta{border-inline-start:0;border-top:1px solid var(--day-line);padding:20px 0 0}
  .hero-head{gap:clamp(20px,3.5vw,36px)}
  .fgrid{grid-template-columns:1fr 1fr}
}
/* القايمة المطويّة بتبدأ من ١١٢٠ — تسميات الفصحى محتاجة عرض أكبر،
   وتحت ده الناف كان بيطفح خارج الشاشة. */
@media(max-width:1120px){
  nav{display:none}
  nav.open{display:flex;flex-direction:column;position:absolute;top:76px;inset-inline:0;background:var(--ink);border-bottom:1px solid var(--line);padding:14px var(--gut) 22px;gap:2px}
  .burger{display:grid;margin-inline-start:6px}
  .bar .btn-key{display:none}
  /* مبدّل اللغة بيفضل ظاهر جنب الـ burger */
  .bar .lang{margin-inline-start:auto}
}
@media(max-width:720px){
  .frames,.fac,.frames.three,.outs{grid-template-columns:1fr}
  .form,.fgrid{grid-template-columns:1fr}
  /* على الموبايل اللوجو فوق العنوان مش جنبه */
  .hero-head{flex-direction:column;align-items:flex-start;gap:22px}
  .hero-mark{width:clamp(92px,28vw,140px)}
  .hero-head h1{max-width:100%}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}