/* كو أكاديمي — عربي RTL
   القواعد: WEB-DESIGN-RULES.md · الألوان والخطوط: brand.md
   · ولا letter-spacing على نص عربي   · line-height ≥ 1.7
   · خصائص منطقية بس (inline-start/end)   · موبايل أولاً */

@font-face{font-family:Arkan;src:url(/fonts/arkan-light.woff2)format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:Arkan;src:url(/fonts/arkan-regular.woff2)format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Arkan;src:url(/fonts/arkan-bold.woff2)format("woff2");font-weight:700;font-display:swap}
/* الخط عنده 3 أوزان حقيقية بس — ممنوع نطلب 500/600 وإلا المتصفح بيزنّقهم (faux bold) */

:root{
  --ink:#333333;          /* الفحمي — أساسي */
  --green:#218C03;        /* أخضر كو البراندي — للوجو والحدود والعناصر الرسومية */
  /* ⚠️ #218C03 بيعطي 4.36:1 على أبيض — تحت عتبة WCAG AA (4.5) للنص الصغير،
     ونفس الشي أبيض فوقه. --green-ink أغمق 8% (5.00:1) وفرقه مش ملحوظ بالعين.
     منستعمله للنص الصغير وخلفيات الأزرار بس؛ اللون البراندي ما تغيّر. */
  --green-ink:#1E8103;
  --green-d:#1a6f02;
  --bg:#ffffff;
  --bg-2:#f6f7f6;
  --bg-3:#eef0ee;
  --line:#e2e5e2;
  --muted:#6d726d;
  --dark:#050505;
  --radius:14px;
  --wrap:1140px;
  --shadow:0 1px 3px rgba(0,0,0,.05),0 8px 24px -12px rgba(0,0,0,.12);
}

*,*::before,*::after{box-sizing:border-box}
/* ⚠️ ممنوع overflow-x:clip/hidden على html أو body — بيقصّ العناصر position:fixed
   (درج القائمة اختفى بسببها). الحل الصح: ما نخبّي أي عنصر بإحداثي أفقي سالب أصلاً —
   الدرج بينخبّى بـvisibility والشارات محصورة جوا .hero اللي عندها overflow:hidden. */
/* 🔤 مقياس الخط العام. كل مقاسات الخط بالمشروع بـrem، فهالسطر لحاله
   بيكبّر أو بيصغّر الموقع كله. 125% = 1rem يساوي 20px بدل 16.
   وبما إنها rem، الموقع صار يحترم كمان إعداد حجم الخط بمتصفح المستخدم. */
html{font-size:125%;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:Arkan,"Segoe UI",Tahoma,system-ui,sans-serif;
  font-weight:400;font-size:1.0625rem;line-height:1.85;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{line-height:1.4;margin:0 0 .6em;font-weight:700}
h1{font-size:clamp(1.85rem,5.2vw,3rem)}
h2{font-size:clamp(1.4rem,3.6vw,2.1rem)}
h3{font-size:1.15rem}
p{margin:0 0 1.1em}
a{color:inherit;text-decoration:none}
img,svg,video{max-width:100%;height:auto;display:block}
ul{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit}

/* عزل أي لاتيني/رقم جوا جملة عربية — بدونه النقطة بتطير لأول السطر */
.ltr{direction:ltr;unicode-bidi:isolate;display:inline-block}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:20px}
/* skip-link: منخبّيه لفوق مش لبرّا الجنب — الإحداثي الجانبي بيكسر RTL */
.skip{position:fixed;inset-inline-start:0;top:-60px;background:var(--ink);color:#fff;
  padding:12px 20px;z-index:99;transition:top .15s}
.skip:focus{top:0}
:focus-visible{outline:3px solid var(--green);outline-offset:2px;border-radius:4px}

/* ── الهيدر ── */
/* ⚠️ ممنوع backdrop-filter (ولا transform/filter) هون: بيخلّي الهيدر
   containing block لأي عنصر position:fixed جوّاه — فدرج القائمة انحصر
   جوا ارتفاع الهيدر (66px) وطلع صندوق فاضي. خلفية صلبة بدلها. */
.site-head{position:sticky;top:0;z-index:50;background:#fff;
  border-bottom:1px solid var(--line)}
.head-in{display:flex;align-items:center;gap:18px;min-height:66px}
/* اللوجو لاتيني — لازم LTR وإلا بينقرا "ACADEMY CO" بالمقلوب.
   الـletter-spacing مسموح هون لأنه نص لاتيني مش عربي. */
.logo{display:inline-flex;align-items:center;gap:7px;flex-shrink:0;direction:ltr}
.logo-co{font-size:1.5625rem;font-weight:700;letter-spacing:.5px;color:var(--ink)}
.logo-dot{width:8px;height:8px;border-radius:50%;background:var(--green);margin-inline-start:-4px}
.logo-ac{font-size:0.6875rem;font-weight:700;letter-spacing:2.5px;color:var(--green-ink)}
.logo-foot .logo-co{color:#fff}

.nav{display:flex;align-items:center;gap:4px;margin-inline-start:auto}
.nav a{padding:9px 13px;border-radius:9px;font-size:0.9688rem;color:var(--muted);transition:.15s}
.nav a:hover{color:var(--ink);background:var(--bg-2)}
.nav a.on{color:var(--ink);font-weight:700}
.nav-out{font-size:0.875rem;color:var(--muted)!important;padding:9px 11px!important}
.nav-out:hover{color:#b3261e!important;background:#fdf2f2!important}
/* ⚠️ لازم `.site-head .head-act` مش `.head-act` لحالها: `.btn{display:inline-flex}`
   بيجي بعدها بنفس الخصوصية فبيغلبها، وبتطلع كبستين «دخول» عالديسكتوب. */
.site-head .head-act{display:none}
.nav-toggle{display:none;margin-inline-start:auto;background:none;border:0;padding:10px;cursor:pointer}
.nav-toggle span{display:block;width:23px;height:2px;background:var(--ink);border-radius:2px}
.nav-toggle span+span{margin-top:5px}

/* ── الأزرار ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--green-ink);color:#fff!important;border:0;cursor:pointer;
  padding:14px 28px;border-radius:10px;font-weight:700;font-size:1rem;
  min-height:48px;transition:.15s;text-align:center}
.btn:hover{background:var(--green-d);transform:translateY(-1px)}
.btn-sm{padding:9px 18px;min-height:40px;font-size:0.9375rem}
.btn-ghost{background:transparent;color:var(--ink)!important;border:1.5px solid var(--line)}
.btn-ghost:hover{background:var(--bg-2);border-color:var(--ink)}
.btn-dark{background:var(--ink)}
.btn-dark:hover{background:#000}
.btn-block{width:100%}

/* ── أقسام ── */
section{padding-block:clamp(48px,7vw,84px)}
.sec-head{max-width:660px;margin-bottom:36px}
.sec-head p{color:var(--muted);margin:0}
.kicker{display:inline-block;font-size:0.75rem;font-weight:700;color:var(--green-ink);
  background:#eef6ea;padding:5px 13px;border-radius:99px;margin-bottom:14px}
.bg-2{background:var(--bg-2)}

/* ── الشبكة والكروت ── */
.grid{display:grid;gap:20px}
.g2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.g3{grid-template-columns:repeat(auto-fill,minmax(268px,1fr))}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:22px;transition:.18s}
a.card:hover{border-color:var(--green);box-shadow:var(--shadow);transform:translateY(-2px)}
.card h3{margin-bottom:8px}
.card .meta{color:var(--muted);font-size:0.875rem;margin:0}
.badge{display:inline-block;font-size:0.75rem;font-weight:700;padding:4px 11px;border-radius:99px;
  background:var(--bg-3);color:var(--muted)}
.badge-on{background:#eef6ea;color:var(--green-ink)}
.badge-lock{background:#fdf2f2;color:#a33}

/* ── نماذج ── */
label{display:block;font-size:0.9062rem;font-weight:700;margin-bottom:7px}
input,textarea,select{width:100%;font:inherit;padding:13px 15px;border:1.5px solid var(--line);
  border-radius:10px;background:#fff;color:var(--ink);min-height:48px}
input:focus,textarea:focus{outline:0;border-color:var(--green)}
.field{margin-bottom:17px}
.hint{font-size:0.8438rem;color:var(--muted);margin:6px 0 0}
.alert{padding:13px 17px;border-radius:10px;margin-bottom:18px;font-size:0.9375rem}
.alert-err{background:#fdf2f2;color:#a33;border:1px solid #f5d5d5}
.alert-ok{background:#eef6ea;color:var(--green-d);border:1px solid #cfe4c6}
.narrow{max-width:430px;margin-inline:auto}

/* كود الدخول — أرقام لاتينية، متباعدة، LTR */
.code-input{direction:ltr;text-align:center;font-size:1.875rem;letter-spacing:14px;
  font-weight:700;padding-inline-start:14px}

@media (max-width:820px){
  .nav-toggle{display:block}
  .nav{position:fixed;inset-block:66px 0;inset-inline-end:0;width:min(82%,310px);
    flex-direction:column;align-items:stretch;gap:2px;background:#fff;
    border-inline-start:1px solid var(--line);padding:18px;z-index:60;
    opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:opacity .18s,transform .18s,visibility .18s;
    overflow-y:auto;box-shadow:-14px 0 40px rgba(0,0,0,.16)}
  .nav.open{opacity:1;visibility:visible;transform:none}
  .nav a{padding:13px 15px;font-size:1.0312rem}
  .nav .btn{margin-top:10px}
  .nav-out{margin-top:6px;text-align:center;border:1px solid var(--line);border-radius:9px}
  /* زر الدخول/الخروج برّا الدرج — متاح دايماً بدون ما تفتح القائمة */
  .site-head .head-act{display:inline-flex;margin-inline-start:auto}
  .nav-toggle{margin-inline-start:10px}
  /* طبقة تعتيم خلف الدرج */
  .nav-veil{position:fixed;inset:0;background:rgba(0,0,0,.38);z-index:55;
    opacity:0;visibility:hidden;transition:.18s}
  .nav-veil.on{opacity:1;visibility:visible}
}

/* ── الفوتر ── */
.site-foot{background:var(--dark);color:#cfd3cf;margin-top:64px;font-size:0.9375rem}
.foot-grid{display:grid;gap:34px;padding-block:52px;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.foot-grid h3{color:#fff;font-size:0.875rem;margin-bottom:13px}
.foot-grid h3.mt{margin-top:22px}
.foot-grid li{margin-bottom:8px}
.foot-grid a:hover{color:var(--green)}
.foot-tag{color:#9aa09a;font-size:0.9062rem;max-width:290px}
.foot-social{display:flex;gap:14px;flex-wrap:wrap;font-size:0.875rem}
.foot-social a{color:#9aa09a}
.foot-bar{border-top:1px solid #1c1e1c;padding-block:16px;font-size:0.8125rem;color:#7d827d}

/* ── المرفقات بالدرس ── */
.att{border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;
  margin:16px 0;background:var(--bg-2)}
.att-row{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.att-ico{font-size:1.625rem;line-height:1;flex-shrink:0}
.att-name{font-weight:700;word-break:break-word;line-height:1.5}
.att-size{display:block;font-weight:400;font-size:0.8438rem;color:var(--muted);margin-top:2px}
.att-acts{display:flex;gap:9px;flex-wrap:wrap}
.att-acts .btn{flex:1 1 auto;min-width:104px}
/* العارض الداخلي: للشاشات الكبيرة بس — الـPDF عنا ~30MB والموبايل بيعرضه بشكل سيّئ */
.att-view{display:none}
.att-frame{width:100%;height:min(78vh,860px);border:1px solid var(--line);
  border-radius:12px;margin-top:14px;background:#fff}
.att-img{margin:16px 0}
.att-img img{border-radius:12px;border:1px solid var(--line);width:100%}
@media (min-width:900px){
  .att-view{display:inline-flex}
  .att-acts .btn{flex:0 0 auto}
}

/* ══════════ الصفحة الرئيسية ══════════ */
/* هيرو: نص + C-One (البرزنتور). داكن لأن الشخصية مصمّمة على خلفية غامقة. */
/* ⚠️ C-One ببدلة سودا — على خلفية سودا بيختفي تماماً.
   لهيك الخلفية فحمي مرفوع + هالة خضرا خلف الشخصية بتفصل الصورة الظليّة. */
.hero{background:linear-gradient(160deg,#14180f 0%,#0a0c08 55%,#101408 100%);
  color:#fff;position:relative;overflow:hidden;padding-block:clamp(38px,6vw,68px) 0}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 50% at 22% 55%,rgba(33,140,3,.34),transparent 68%),
             radial-gradient(80% 60% at 70% 0%,rgba(33,140,3,.14),transparent 70%)}
.hero-in{position:relative;display:grid;gap:clamp(18px,3vw,40px);align-items:end;
  grid-template-columns:1fr}
.hero-txt{padding-bottom:clamp(24px,4vw,52px)}
.hero h1{color:#fff;margin-bottom:.45em}
.hero h1 em{font-style:normal;color:var(--green)}
.hero-sub{color:#c9cec9;font-size:clamp(1rem,2.2vw,1.1875rem);max-width:37ch;margin-bottom:26px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:22px}
.hero-facts{display:flex;gap:22px;flex-wrap:wrap;color:#9aa09a;font-size:0.9062rem}
.hero-facts b{color:#fff;font-size:1.1875rem;display:block;line-height:1.35}
.hero-fig{position:relative;justify-self:center;align-self:end;max-width:400px}
/* الهالة خلف الشخصية — بدونها البدلة السودا بتذوب بالخلفية */
.hero-fig::before{content:"";position:absolute;inset:-8% -14% 4%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(60,200,20,.42),rgba(33,140,3,.16) 55%,transparent 78%);
  filter:blur(6px)}
.hero-fig img{position:relative;width:100%;
  filter:drop-shadow(0 0 26px rgba(80,220,40,.28)) drop-shadow(0 22px 40px rgba(0,0,0,.65))}
.hero-fig::after{content:"";position:absolute;bottom:0;inset-inline:10%;height:22px;
  border-radius:50%;background:radial-gradient(closest-side,rgba(60,200,20,.55),transparent)}

/* شارات الأدوات حوالين الشخصية */
.hero-chips{position:absolute;inset:0;pointer-events:none;display:none}
.hero-chips span{position:absolute;background:rgba(255,255,255,.09);color:#fff;
  border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(6px);
  padding:7px 14px;border-radius:99px;font-size:0.8438rem;font-weight:700;white-space:nowrap;
  direction:ltr}
/* الشارات لازم تضل برّا الشخصية — الوجه بين ~28% و~46% عرضاً فمنتجنّبه */
/* برّا الشخصية بس **جوا الشاشة** — الإزاحة الكبيرة كانت بتطلع الشارة برّا الحافة */
.hero-chips span:nth-child(1){top:6%;inset-inline-start:-13%}
.hero-chips span:nth-child(2){top:30%;inset-inline-start:-19%}
.hero-chips span:nth-child(3){top:66%;inset-inline-start:-15%}
.hero-chips span:nth-child(4){top:14%;inset-inline-end:-6%}
.hero-chips span:nth-child(5){top:52%;inset-inline-end:-10%}

@media (min-width:900px){
  .hero-in{grid-template-columns:1.15fr .85fr}
  .hero-chips{display:block}
  .hero-fig{max-width:460px}
}

/* شريط الثقة */
.trust{background:var(--bg-2);border-block:1px solid var(--line);padding-block:18px!important}
.trust ul{display:flex;gap:clamp(16px,4vw,52px);flex-wrap:wrap;justify-content:center;
  color:var(--muted);font-size:0.9062rem}
.trust li{display:flex;align-items:center;gap:8px}
.trust b{color:var(--ink)}

/* كروت المزايا */
.feat{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.feat .card{padding:24px}
.feat .ico{font-size:1.6875rem;line-height:1;margin-bottom:12px;display:block}

/* قسم المسار الذهبي مع الخلفية المشهدية */
.gp{position:relative;overflow:hidden;background:var(--dark);color:#fff}
.gp-bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.3}
.gp-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(
  to bottom,rgba(5,5,5,.55),rgba(5,5,5,.8))}
.gp-in{position:relative}
.gp h2{color:#fff}
.gp-list{display:grid;gap:10px 22px;grid-template-columns:1fr;margin:22px 0 28px}
.gp-list li{display:flex;gap:10px;align-items:flex-start;color:#d7dbd7}
.gp-list b{color:var(--green);font-weight:700}
@media (min-width:700px){.gp-list{grid-template-columns:1fr 1fr}}

/* كرت ورشة بوصف */
.c-card{display:flex;flex-direction:column;height:100%}
.c-card .cat{font-size:0.75rem;font-weight:700;color:var(--green);margin-bottom:8px;display:block}
.c-card p.d{color:var(--muted);font-size:0.9062rem;line-height:1.75;margin:0 0 14px;flex:1}
.c-card .foot{display:flex;justify-content:space-between;align-items:center;
  color:var(--muted);font-size:0.8438rem;border-top:1px solid var(--line);padding-top:12px}
.star{background:#fff6e5;color:#976900}