/* ===========================================================================
   صفحة الهبوط العامة — الأنماط.
   مستقلّة تمامًا عن أنماط المحرّك التعليمي (engine/styles.css) وعن ui.css،
   فلا يتأثّر أي شيء في المنصّة المعتمدة بما يتغيّر هنا.
   =========================================================================== */

:root{
  --navy-950:#06182b; --navy-900:#0b2542; --navy-800:#12375d; --navy-700:#1b4677;
  --blue-primary:#1687ff; --blue-light:#48a9ff; --cyan:#19c4d8;
  --gold:#f5b72e; --gold-soft:#ffd66b; --gold-deep:#d99a12;
  --white:#fff; --surface:#f5f8fc; --surface-2:#fff;
  --text-dark:#10213a; --muted:#6f7e93; --line:#e3eaf3;
  --success:#16b878; --danger:#e95a5a; --purple:#7a35d5;

  --r-sm:9px; --r:14px; --r-lg:20px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(6,24,43,.06), 0 8px 22px -14px rgba(6,24,43,.28);
  --sh-2:0 2px 6px rgba(6,24,43,.08), 0 22px 44px -22px rgba(6,24,43,.4);
  --sh-gold:0 10px 26px -12px rgba(217,154,18,.75);

  /* عائلة الخط والمقاسات مصدرها assets/typography.css — نظام واحد للمنصّة */

  --pad:clamp(16px, 2.1vw, 34px);
  --maxw:1560px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body.lp{
  margin:0; background:var(--surface); color:var(--text-dark);
  font-family:var(--font-family-primary);
  font-size:var(--font-size-body); line-height:var(--line-height-body);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
:focus-visible{outline:3px solid var(--blue-light);outline-offset:2px;border-radius:6px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;inset-inline-start:12px;top:-60px;z-index:200;background:var(--white);
  color:var(--navy-900);padding:10px 18px;border-radius:0 0 var(--r) var(--r);font-weight:800;transition:.2s}
.skip:focus{top:0}

/* ======================================================== الترويسة ===== */
.lp-header{
  position:absolute; inset-inline:0; top:0; z-index:60;
  height:clamp(58px,4.4vw,74px);
  display:grid; align-items:center;
  grid-template-columns:auto 1fr auto;
  gap:clamp(10px,1.6vw,26px);
  padding-inline:var(--pad);
  /* التخطيط الأفقي فيزيائي لا منطقي: التصميم المعتمد يضع الشعار يسارًا
     والإجراءات يمينًا في اللغتين معًا، فلا نتركه ينعكس مع dir. */
  direction:ltr;
  background:linear-gradient(180deg, rgba(6,24,43,.62), rgba(6,24,43,0));
  transition:background .28s, box-shadow .28s;
}
.lp-header.stuck{
  position:fixed; background:rgba(8,28,50,.94);
  backdrop-filter:saturate(150%) blur(12px); box-shadow:0 10px 30px -18px rgba(0,0,0,.8);
}
/* الشعار في أقصى اليسار كما في التصميم المعتمد: العلامة ثم النص يمينها */
.lp-brand{grid-column:1;display:flex;align-items:center;gap:11px;direction:ltr}
.lp-brand .mk{
  width:clamp(34px,2.6vw,44px);aspect-ratio:1;border-radius:11px;flex:none;
  background:linear-gradient(150deg,#1a4d86,#0b2542);
  display:grid;place-items:center;box-shadow:0 6px 16px -8px rgba(0,0,0,.9);
  border:1px solid rgba(255,255,255,.16)
}
.lp-brand .mk svg{width:66%;height:66%}
.lp-brand .tx{direction:rtl;text-align:right;line-height:1.25;min-width:0}
.lp-brand .tx b{display:block;color:#fff;font-size:clamp(14px,1.13vw,18.5px);font-weight:800;
  letter-spacing:-.2px;white-space:nowrap}
.lp-brand .tx span{display:block;color:#b9cbe2;font-size:clamp(9.5px,.72vw,11.6px);white-space:nowrap}

.lp-nav{grid-column:2;display:flex;justify-content:flex-end;align-items:center;
  gap:clamp(8px,1.35vw,26px);min-width:0;direction:rtl;
  padding-inline-end:clamp(8px,1.6vw,34px)}
html[dir="rtl"] .lp-nav{justify-content:flex-start}
html[dir="ltr"] .lp-nav{direction:ltr;justify-content:flex-start;
  padding-inline-start:clamp(10px,2vw,40px)}
.lp-nav a{
  color:#e2ecf8;font-size:var(--font-size-nav);font-weight:var(--font-weight-semibold);white-space:nowrap;
  padding:6px 2px;position:relative;transition:color .18s
}
.lp-nav a:hover{color:#fff}
.lp-nav a[aria-current="page"]{color:#fff;font-weight:700}
.lp-nav a[aria-current="page"]::after{
  content:"";position:absolute;inset-inline:0;bottom:-3px;height:2.5px;border-radius:3px;background:var(--gold)}

.lp-actions{grid-column:3;display:flex;align-items:center;gap:clamp(6px,.85vw,14px)}
.icon-round{
  width:clamp(30px,2.2vw,38px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;
  color:#e6eefa;transition:background .18s,color .18s
}
.icon-round:hover{background:rgba(255,255,255,.14);color:#fff}
.icon-round svg{width:56%;height:56%;stroke-width:2.1}
.btn-login{
  display:inline-flex;align-items:center;gap:8px;background:#fff;color:#123a6b;
  font-weight:var(--font-weight-bold);font-size:var(--font-size-nav);
  padding:clamp(7px,.6vw,11px) clamp(12px,1.05vw,20px);border-radius:var(--r-pill);white-space:nowrap;
  box-shadow:0 8px 20px -12px rgba(0,0,0,.85);transition:transform .16s, box-shadow .16s
}
.btn-login:hover{transform:translateY(-1px);box-shadow:0 12px 26px -12px rgba(0,0,0,.9)}
.btn-login:active{transform:translateY(0)}
.btn-login svg{width:1.15em;height:1.15em;flex:none}
.lang{display:flex;align-items:center;gap:5px;color:#dbe7f6;font-size:clamp(11px,.8vw,13.5px);
  font-weight:700;padding:5px 8px;border-radius:var(--r-pill)}
.lang:hover{background:rgba(255,255,255,.14);color:#fff}
.lang svg{width:1.15em;height:1.15em}

/* قائمة الحساب للمستخدم المسجَّل */
.acct{position:relative}
.acct-btn{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.22);color:#fff;font-weight:700;
  font-size:clamp(11px,.82vw,13.6px);padding:5px 12px 5px 5px;border-radius:var(--r-pill)}
.acct-btn:hover{background:rgba(255,255,255,.2)}
.acct-btn .av{width:26px;height:26px;border-radius:50%;background:var(--gold);color:#3a2703;
  display:grid;place-items:center;font-weight:900;font-size:12.5px;flex:none}
.acct-menu{position:absolute;top:calc(100% + 9px);inset-inline-end:0;background:#fff;
  border-radius:var(--r);box-shadow:var(--sh-2);padding:6px;min-width:215px;z-index:90}
.acct-menu a,.acct-menu button{display:flex;gap:9px;align-items:center;width:100%;
  padding:9px 12px;border-radius:9px;font-size:13.6px;font-weight:600;color:#33445c;text-align:start}
.acct-menu a:hover,.acct-menu button:hover{background:var(--surface);color:var(--text-dark)}
.acct-menu .hd{padding:9px 12px}
.acct-menu .hd b{display:block;font-size:14px;color:var(--text-dark)}
.acct-menu .hd span{font-size:11.5px;color:var(--muted)}
.acct-menu .sep{height:1px;background:var(--line);margin:5px 0}

.nav-toggle{display:none}

/* =========================================================== الهيرو ===== */
.hero{
  /* نسبة الهيرو مأخوذة من التصميم المعتمد (1536×396) مع حدّ أدنى للشاشات الضيّقة */
  position:relative; width:100%; aspect-ratio:1536/430; min-height:clamp(390px,28vw,470px);
  background-color:var(--navy-950);
  background-image:url("/assets/media/hero.jpg");
  background-repeat:no-repeat; background-size:cover; background-position:right center;
  display:flex; align-items:center; isolation:isolate; overflow:hidden;
}
.hero::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(to left, rgba(6,24,43,0) 46%, rgba(6,24,43,.55) 68%, rgba(6,24,43,.86) 88%),
    linear-gradient(to top, rgba(6,24,43,.92) 0%, rgba(6,24,43,.55) 16%, rgba(6,24,43,0) 46%);
}
.hero-inner{position:relative;z-index:2;width:100%;padding-inline:var(--pad);
  padding-top:clamp(74px,6vw,100px);padding-bottom:clamp(58px,5.6vw,90px);direction:ltr}
.hero-copy{max-width:min(54ch,44vw);text-align:right;direction:rtl}
.hero h1{
  margin:0;color:#fff;font-weight:900;letter-spacing:-1px;
  font-size:var(--font-size-display);line-height:var(--line-height-display);
  letter-spacing:var(--letter-spacing-display);text-shadow:0 4px 26px rgba(0,0,0,.55)
}
.hero h1 .gold{color:var(--gold);display:block}
.hero .lead{
  margin:clamp(9px,.9vw,16px) 0 0;color:#cfdcec;font-size:var(--font-size-body-sm);
  line-height:var(--line-height-relaxed);text-shadow:0 2px 14px rgba(0,0,0,.6);max-width:42ch
}
.hero-cta{display:flex;align-items:center;gap:clamp(9px,.95vw,16px);
  margin-top:clamp(14px,1.5vw,26px);flex-direction:row-reverse;justify-content:flex-end}
.btn-gold{
  display:inline-flex;align-items:center;gap:10px;background:linear-gradient(160deg,var(--gold-soft),var(--gold));
  color:#3d2a04;font-weight:var(--font-weight-black);font-size:var(--font-size-button);
  padding:clamp(10px,.85vw,15px) clamp(18px,1.6vw,30px);border-radius:var(--r-pill);
  white-space:nowrap;box-shadow:var(--sh-gold);transition:transform .16s,box-shadow .16s,filter .16s
}
.btn-gold:hover{transform:translateY(-2px);filter:brightness(1.05);
  box-shadow:0 16px 34px -14px rgba(217,154,18,.9)}
.btn-gold:active{transform:translateY(0)}
.btn-ghost{
  display:inline-flex;align-items:center;gap:10px;color:#fff;font-weight:var(--font-weight-semibold);
  font-size:var(--font-size-button);padding:clamp(10px,.85vw,15px) clamp(16px,1.4vw,26px);
  white-space:nowrap;border:1.6px solid rgba(255,255,255,.55);border-radius:var(--r-pill);
  background:rgba(10,28,50,.28);backdrop-filter:blur(4px);transition:.18s
}
.btn-ghost:hover{background:rgba(255,255,255,.16);border-color:#fff}
.btn-ghost .play{width:1.55em;height:1.55em;border-radius:50%;background:#fff;color:var(--navy-900);
  display:grid;place-items:center;flex:none}
.btn-ghost .play svg{width:52%;height:52%}

.hero-feats{display:flex;gap:clamp(10px,1.5vw,32px);margin-top:clamp(12px,1.4vw,24px);
  flex-direction:row-reverse;justify-content:flex-end;flex-wrap:nowrap}
.hero-feats li{display:flex;align-items:center;gap:7px;color:#d7e3f2;
  font-size:clamp(10.5px,.78vw,13px);font-weight:600;list-style:none;white-space:nowrap}
.hero-feats svg{width:1.35em;height:1.35em;color:#fff;opacity:.9;flex:none}
.hero-feats ul{display:contents}


/* أحجام الأيقونات داخل الأزرار — بلا هذا تنهار الـSVG بلا مقاس */
.btn-gold>svg,.btn-ghost>svg,.btn-login>svg,.acct-menu svg,.quiz .again>svg{
  width:1.15em;height:1.15em;flex:none}
.acct-menu svg{width:1.25em;height:1.25em;color:var(--muted)}
/* الأيقونة يسار النص في صفّ مزايا الهيرو، كما في التصميم المعتمد */
.hero-feats li{flex-direction:row-reverse}


/* ============================================ قسم المراحل التعليمية ==== */
.stages{position:relative;z-index:3;padding:0 var(--pad) clamp(20px,2vw,34px);
  margin-top:clamp(-84px,-5.6vw,-58px)}
/* على الصفحة الرئيسية يقع عنوان القسم أسفل يمين الهيرو، كموضع «المواد
   الدراسية» في التصميم المعتمد — لا في المنتصف فوق وجه الطالب. */
.sec-head{text-align:end;padding:clamp(14px,1.4vw,24px) 0 clamp(12px,1.2vw,20px)}
.sec-head h2{margin:0;color:#fff;font-size:var(--font-size-h2);
  font-weight:var(--font-weight-black);text-shadow:0 2px 16px rgba(0,0,0,.7)}
.sec-head p{margin:5px 0 0;color:#d3e0ef;font-size:var(--font-size-body-sm);
  text-shadow:0 2px 12px rgba(0,0,0,.6)}
.sec-head.start{text-align:start}
.sec-head.start h2{color:var(--text-dark);text-shadow:none}
.sec-head.start p{color:var(--muted);text-shadow:none}

.stage-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.1vw,20px)}
.stage-card{
  position:relative;overflow:hidden;border-radius:var(--r-lg);isolation:isolate;
  min-height:clamp(180px,13.5vw,240px);display:flex;align-items:flex-end;color:#fff;
  box-shadow:var(--sh-1);transition:transform .22s cubic-bezier(.2,.8,.3,1), box-shadow .22s
}
.stage-card:hover{transform:translateY(-5px);box-shadow:var(--sh-2)}
.stage-card:active{transform:translateY(-1px)}
.stage-card .bg{position:absolute;inset:0;z-index:-2;
  background:linear-gradient(150deg,var(--s1),var(--s2))}
.stage-card::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(120% 90% at 15% 0%, rgba(255,255,255,.16), transparent 58%),
             linear-gradient(to top, rgba(0,0,0,.42), transparent 62%)}
.stage-card .glyph{position:absolute;inset-block:auto 0;top:clamp(8px,1vw,18px);
  inset-inline-start:clamp(6px,.8vw,16px);width:clamp(96px,9vw,152px);z-index:-1;
  color:var(--sa);opacity:.55;pointer-events:none}
.stage-card .glyph svg{width:100%;height:auto;filter:drop-shadow(0 8px 18px rgba(0,0,0,.4))}
.stage-card .body{position:relative;padding:clamp(14px,1.3vw,24px);width:100%;text-align:right}
.stage-card h3{margin:0;font-size:var(--font-size-h2);font-weight:var(--font-weight-black);
  text-shadow:0 2px 12px rgba(0,0,0,.55)}
.stage-card p{margin:5px 0 0;font-size:var(--font-size-body-sm);color:rgba(255,255,255,.92);
  text-shadow:0 1px 10px rgba(0,0,0,.55)}
.stage-card .meta{display:flex;align-items:center;justify-content:space-between;
  margin-top:clamp(10px,1vw,16px);gap:10px}
.pill{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.28);border-radius:var(--r-pill);
  padding:5px 13px;font-size:var(--font-size-caption);font-weight:var(--font-weight-semibold)}
.pill.mine{background:rgba(22,184,120,.9);border-color:transparent;color:#fff;margin-inline-start:8px}
.pill.mine svg{width:1.05em;height:1.05em}
.stage-card .go{width:clamp(28px,2.2vw,38px);aspect-ratio:1;border-radius:50%;background:#fff;
  color:var(--s1);display:grid;place-items:center;flex:none;
  box-shadow:0 6px 16px -7px rgba(0,0,0,.7);transition:transform .18s}
.stage-card .go svg{width:46%;height:46%}
.stage-card:hover .go{transform:scale(1.12)}

/* ============================================ الصفحات الداخلية ========= */
.inner-page{min-height:60vh}
.page-hero{
  position:relative;overflow:hidden;color:#fff;
  padding:calc(clamp(58px,4.4vw,74px) + clamp(14px,1.4vw,26px)) var(--pad) clamp(20px,2vw,36px);
  background:linear-gradient(140deg,var(--s1,#0b2542),var(--s2,#1b4677))
}
.page-hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(110% 120% at 12% 0%, rgba(255,255,255,.14), transparent 60%)}
.page-hero-in{position:relative;display:flex;align-items:center;justify-content:space-between;
  gap:20px;margin-top:clamp(10px,1vw,18px)}
.page-hero h1{margin:0;font-size:var(--font-size-h1);font-weight:var(--font-weight-black);
  text-shadow:0 3px 18px rgba(0,0,0,.45)}
.page-hero p{margin:6px 0 0;color:#d7e4f3;font-size:var(--font-size-body)}
.page-hero .eyebrow{display:block;font-size:var(--font-size-caption);color:var(--sa,#f5b72e);
  font-weight:var(--font-weight-bold);margin-bottom:4px}
.page-hero .pill{margin-top:clamp(9px,.9vw,14px)}
.page-hero .glyph{width:clamp(90px,10vw,170px);color:var(--sa,#f5b72e);opacity:.5;flex:none}
.page-hero .glyph svg{width:100%;height:auto}
.inner-body{padding:clamp(14px,1.6vw,28px) var(--pad) clamp(24px,2.4vw,44px)}
.page-foot{margin-top:clamp(18px,1.8vw,30px)}

/* -------------------------------------------------- مسار التنقّل ------ */
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0;padding:0;list-style:none}
.crumbs li{display:flex;align-items:center;gap:6px;color:#c3d5ea}
.crumbs li+li::before{content:"›";opacity:.6;font-size:1.15em;line-height:1}
html[dir="ltr"] .crumbs li+li::before{content:"›"}
.crumbs a{color:#dbe8f7;text-decoration:none}
.crumbs a:hover{color:#fff;text-decoration:underline}
.crumbs [aria-current]{color:#fff;font-weight:var(--font-weight-bold)}

.back-link{display:inline-flex;align-items:center;gap:9px;color:var(--navy-800);
  font-weight:var(--font-weight-bold);font-size:var(--font-size-body-sm);
  border:1.5px solid var(--line);background:#fff;border-radius:var(--r-pill);padding:9px 18px}
.back-link:hover{background:var(--surface);border-color:#cfdcea}
.back-link svg{width:1.15em;height:1.15em}

/* ---------------------------------------------------- بطاقات الصفوف --- */
.grade-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(clamp(230px,20vw,290px),1fr));
  gap:clamp(9px,.9vw,15px)}
.grade-card{
  position:relative;display:flex;align-items:center;gap:clamp(10px,1vw,16px);
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(11px,1vw,17px);box-shadow:var(--sh-1);
  transition:transform .2s cubic-bezier(.2,.8,.3,1), box-shadow .2s, border-color .2s
}
.grade-card:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:transparent}
.grade-card .num{
  width:clamp(38px,3vw,50px);aspect-ratio:1;border-radius:14px;flex:none;display:grid;
  place-items:center;color:#fff;font-weight:var(--font-weight-black);
  font-size:var(--font-size-h3);background:linear-gradient(150deg,var(--s1),var(--s2))}
.grade-card .tx{min-width:0;flex:1}
.grade-card h3{margin:0;font-size:var(--font-size-h3);font-weight:var(--font-weight-bold);
  color:var(--text-dark)}
.grade-card .st{display:block;font-size:var(--font-size-caption);color:var(--muted)}
.grade-card .cnt{display:inline-block;margin-top:5px;font-size:var(--font-size-caption);
  color:var(--navy-700);background:var(--surface);border-radius:var(--r-pill);padding:2px 10px}
.grade-card .go{width:clamp(24px,1.9vw,32px);aspect-ratio:1;border-radius:50%;flex:none;
  display:grid;place-items:center;background:var(--surface);color:var(--navy-800);transition:.18s}
.grade-card .go svg{width:46%;height:46%}
.grade-card:hover .go{background:var(--navy-900);color:#fff}

/* ===========================================================================
   الترقية البصرية لصفحتَي المرحلة والصفّ — طبقة عرض فوق البنية المعتمدة.
   لا تلمس تسلسل مرحلة←صفّ←مادة، ولا المصادقة، ولا التفويض: أنماط فقط.
   =========================================================================== */

/* عمق خفيف خلف الصفحات الداخلية بدل المساحات البيضاء الكبيرة */
.inner-page{
  background:
    radial-gradient(58% 42% at 92% 0%, rgba(22,135,255,.07), transparent 62%),
    radial-gradient(48% 38% at 4% 34%, rgba(122,53,213,.06), transparent 64%),
    linear-gradient(180deg, #f7fafd 0%, var(--surface) 46%, #eef4fa 100%);
}

/* ------------------------------------------- الهيرو السينمائي للمرحلة --- */
.page-hero.cine{
  padding-block:calc(clamp(58px,4.4vw,74px) + clamp(18px,1.9vw,34px)) clamp(30px,3.1vw,56px);
  background:
    radial-gradient(74% 116% at 84% -10%, rgba(255,255,255,.20), transparent 58%),
    radial-gradient(60% 100% at 6% 108%, rgba(0,0,0,.34), transparent 62%),
    linear-gradient(138deg, var(--s1,#0b2542) 0%, var(--s2,#1b4677) 68%, var(--s1,#0b2542) 130%);
}
/* حافّة ذهبية رفيعة أسفل الهيرو — نداء الهوية نفسه الموجود في الصفحة المعتمدة */
.page-hero.cine::before{
  content:"";position:absolute;inset-inline:0;bottom:0;height:3px;z-index:1;
  background:linear-gradient(90deg,transparent,var(--sa,#f5b72e) 22%,var(--sa,#f5b72e) 78%,transparent);
  opacity:.75;pointer-events:none;
}
.page-hero .decor{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.page-hero .decor-grid{position:absolute;inset:0;width:100%;height:100%}
.page-hero .decor-chart{position:absolute;top:8%;inset-inline-start:clamp(-18px,-1vw,0px);
  width:clamp(150px,17vw,300px);height:auto;color:var(--sa,#f5b72e);opacity:.34}
.page-hero .decor-orb{position:absolute;border-radius:50%;filter:blur(1px);
  background:radial-gradient(circle at 32% 28%, rgba(255,255,255,.5), rgba(255,255,255,.04) 62%, transparent 70%)}
.page-hero .decor-orb.a{width:clamp(120px,13vw,230px);aspect-ratio:1;
  inset-block-start:-14%;inset-inline-end:16%;opacity:.5}
.page-hero .decor-orb.b{width:clamp(70px,7vw,130px);aspect-ratio:1;
  inset-block-end:-10%;inset-inline-end:44%;opacity:.35}
.page-hero .decor-stars{position:absolute;inset:0;color:var(--sa,#f5b72e);opacity:.5}
.page-hero .decor-stars svg{width:100%;height:100%}

.page-hero-in.cine{align-items:center;gap:clamp(18px,2.4vw,52px)}
.page-hero .lede{margin:clamp(8px,.9vw,14px) 0 0;max-width:62ch;color:#cfe0f2;
  font-size:var(--font-size-body);line-height:var(--line-height-relaxed,1.75)}
.page-hero .hero-meta{display:flex;flex-wrap:wrap;align-items:center;gap:9px;
  margin-top:clamp(11px,1.1vw,18px)}
.page-hero .badge{display:inline-flex;align-items:center;gap:7px;border-radius:var(--r-pill);
  padding:6px 14px;font-size:var(--font-size-caption);font-weight:var(--font-weight-bold);
  color:#2a1d02;background:linear-gradient(120deg,var(--gold-soft),var(--gold));
  box-shadow:var(--sh-gold)}
.page-hero .badge svg{width:1.1em;height:1.1em}

/* الرسم الأكاديمي الكبير جهة النهاية */
.page-hero .stage-figure{position:relative;flex:none;width:clamp(150px,17vw,290px);
  color:var(--sa,#f5b72e)}
.page-hero .stage-figure svg{width:100%;height:auto;
  filter:drop-shadow(0 16px 34px rgba(0,0,0,.45))}
.page-hero .stage-figure .ring{position:absolute;inset:-9%;border-radius:50%;
  border:1.5px dashed rgba(255,255,255,.22);pointer-events:none}
@media (prefers-reduced-motion:no-preference){
  .page-hero .stage-figure .ring{animation:hspin 44s linear infinite}
}
@keyframes hspin{to{transform:rotate(360deg)}}

/* ------------------------------------------------ بطاقات الصفوف الفاخرة --- */
.grade-grid.premium{grid-template-columns:repeat(auto-fit,minmax(clamp(250px,24vw,340px),1fr));
  gap:clamp(11px,1.1vw,20px)}
.grade-card.premium{
  display:block;position:relative;overflow:hidden;isolation:isolate;padding:0;border:0;
  border-radius:var(--r-lg);min-height:clamp(168px,13vw,214px);color:#fff;
  background:linear-gradient(146deg,var(--s1),var(--s2));box-shadow:var(--sh-1);
  transition:transform .24s cubic-bezier(.2,.8,.3,1), box-shadow .24s;
}
.grade-card.premium::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(120% 88% at 12% 0%, rgba(255,255,255,.20), transparent 56%),
             linear-gradient(to top, rgba(0,0,0,.44), transparent 58%)}
.grade-card.premium:hover{transform:translateY(-5px);box-shadow:var(--sh-2)}
.grade-card.premium:active{transform:translateY(-1px)}
/* الرسم يجلس جهة النهاية (يسار في RTL) فوق السهم، بعيدًا عن الرقم والعنوان */
.grade-card.premium .art{position:absolute;z-index:-1;pointer-events:none;
  inset-block-start:clamp(6px,.7vw,16px);inset-inline-end:clamp(6px,.7vw,18px);
  width:clamp(104px,11vw,170px);color:#fff;opacity:.3;
  transition:transform .34s cubic-bezier(.2,.8,.3,1), opacity .34s}
.grade-card.premium .art svg{width:100%;height:auto}
.grade-card.premium:hover .art{transform:scale(1.07) rotate(-2deg);opacity:.42}
.grade-card.premium .body{position:relative;display:flex;flex-direction:column;height:100%;
  min-height:inherit;padding:clamp(14px,1.3vw,24px);text-align:start}
.grade-card.premium .num{
  width:clamp(34px,2.7vw,46px);aspect-ratio:1;border-radius:13px;display:grid;place-items:center;
  background:rgba(255,255,255,.17);border:1px solid rgba(255,255,255,.3);color:#fff;
  font-weight:var(--font-weight-black);font-size:var(--font-size-h3);
  backdrop-filter:blur(3px);margin-bottom:auto}
.grade-card.premium h3{margin:clamp(10px,1vw,16px) 0 0;color:#fff;
  font-size:var(--font-size-h3);font-weight:var(--font-weight-black);
  text-shadow:0 2px 12px rgba(0,0,0,.5)}
.grade-card.premium .sub{display:block;margin-top:4px;color:rgba(255,255,255,.9);
  font-size:var(--font-size-body-sm);text-shadow:0 1px 9px rgba(0,0,0,.5)}
.grade-card.premium .meta{display:flex;align-items:center;justify-content:space-between;
  gap:10px;margin-top:clamp(11px,1.1vw,17px)}
.grade-card.premium .cnt{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.26);
  border-radius:var(--r-pill);padding:4px 12px;color:#fff;margin:0;
  font-size:var(--font-size-caption);font-weight:var(--font-weight-semibold)}
.grade-card.premium .go{width:clamp(28px,2.2vw,38px);aspect-ratio:1;border-radius:50%;flex:none;
  display:grid;place-items:center;background:#fff;color:var(--s1);
  box-shadow:0 6px 16px -7px rgba(0,0,0,.7);transition:transform .18s}
.grade-card.premium .go svg{width:46%;height:46%}
.grade-card.premium:hover .go{transform:scale(1.13)}
/* الصفّ الذي لم يُعتمد له محتوى بعد: الشكل نفسه بحدّة أقلّ — لا بطاقة مكسورة */
.grade-card.premium.soon{filter:saturate(.72)}
.grade-card.premium.soon:hover{filter:saturate(.9)}

/* ---------------------------------------------------------------------------
   بطاقة الصفّ أو المرحلة المصوّرة (.gc-live) — لوحةٌ مولَّدة + وميض + لمعة + إمالة مع المؤشّر.
   تُفعَّل لصفٍّ أو مرحلةٍ لها plate في assets/stages.js؛ غيرُه يبقى بشكله أعلاه. الحركةُ كلُّها
   transform/opacity، والنصُّ لا ينتظرها. أسماءُ الإطارات مسبوقة بـ gc- .
   --------------------------------------------------------------------------- */
.grade-grid.premium,.stage-grid{perspective:1400px}
:is(.grade-card.premium,.stage-card).gc-live{
  transform:translateY(var(--gc-lift,0px)) rotateX(var(--gc-rx,0deg)) rotateY(var(--gc-ry,0deg));
  transition:transform .5s cubic-bezier(.2,1.5,.4,1), box-shadow .3s;
  box-shadow:0 14px 34px -18px rgba(4,16,40,.75);
  animation:gc-rise .75s cubic-bezier(.2,1.4,.4,1) calc(var(--gc-i,0) * 80ms) backwards}
:is(.grade-card.premium,.stage-card).gc-live.gc-track{transition:transform .08s linear, box-shadow .3s}
:is(.grade-card.premium,.stage-card).gc-live:hover,
:is(.grade-card.premium,.stage-card).gc-live:focus-visible{--gc-lift:-8px;
  transform:translateY(var(--gc-lift,0px)) rotateX(var(--gc-rx,0deg)) rotateY(var(--gc-ry,0deg));
  box-shadow:0 30px 54px -22px rgba(4,16,40,.8), 0 0 0 1.5px var(--sa)}
:is(.grade-card.premium,.stage-card).gc-live:active{--gc-lift:-2px}
:is(.grade-card.premium,.stage-card).gc-live.soon,:is(.grade-card.premium,.stage-card).gc-live.soon:hover{filter:none}

.gc-plate,.gc-sparks,.gc-sheen{position:absolute;inset:0;pointer-events:none}
/* اللوحة: عناصرُها جهة النهاية (يسار في RTL)؛ في LTR تُعكس أفقيًّا ليبقى النصُّ على الجانب الهادئ */
.gc-plate{z-index:-2;overflow:hidden}
.gc-plate img{position:absolute;inset:-7%;width:114%;height:114%;max-width:none;object-fit:cover;object-position:left var(--gc-y,50%);display:block;
  transform:translate3d(calc(var(--gc-px,0) * -14px), calc(var(--gc-py,0) * -10px), 0);
  transition:transform .5s cubic-bezier(.2,1.2,.4,1);
  animation:gc-drift 16s ease-in-out infinite alternate}
html[dir="ltr"] .gc-plate{transform:scaleX(-1)}
.gc-track .gc-plate img{transition:transform .08s linear}
/* بطاقة المرحلة تُثبّت نصَّها يمينًا في أصلها؛ المصوّرةُ منها تتبع اتّجاه الصفحة ليبقى النصُّ على الجانب الهادئ */
.stage-card.gc-live .body{text-align:start}
/* ستارةُ القراءة: جهةُ النصّ بلون الصفّ وتتلاشى نحو اللوحة */
:is(.grade-card.premium,.stage-card).gc-live::after{opacity:.94;
  background:linear-gradient(to left, var(--s1) 0%, var(--s1) 26%, transparent 68%),
             linear-gradient(to top, rgba(0,0,0,.5), transparent 52%)}
html[dir="ltr"] :is(.grade-card.premium,.stage-card).gc-live::after{
  background:linear-gradient(to right, var(--s1) 0%, var(--s1) 26%, transparent 68%),
             linear-gradient(to top, rgba(0,0,0,.5), transparent 52%)}
.gc-sparks{z-index:0}
.gc-sparks i{position:absolute;inset-block-start:var(--y);inset-inline-end:var(--x);width:var(--d,5px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle, #fff 0 28%, var(--sa) 48%, transparent 72%);
  opacity:0;animation:gc-twinkle var(--t,3.4s) ease-in-out var(--w,0s) infinite}
.gc-sheen{z-index:0;overflow:hidden;border-radius:inherit}
.gc-sheen::before{content:"";position:absolute;inset-block:-30%;inset-inline-start:-45%;width:34%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.34), transparent);transform:skewX(-16deg);opacity:0}
:is(.grade-card.premium,.stage-card).gc-live:hover .gc-sheen::before,
:is(.grade-card.premium,.stage-card).gc-live:focus-visible .gc-sheen::before{animation:gc-sheen .95s cubic-bezier(.3,.7,.3,1) 1}
:is(.grade-card.premium,.stage-card).gc-live .num{transition:transform .45s cubic-bezier(.2,1.6,.4,1), background .3s}
:is(.grade-card.premium,.stage-card).gc-live:hover .num{transform:translateY(-3px) rotate(-6deg) scale(1.1);background:rgba(255,255,255,.28)}
:is(.grade-card.premium,.stage-card).gc-live:hover .go{transform:scale(1.2) translateX(-4px)}
html[dir="ltr"] :is(.grade-card.premium,.stage-card).gc-live:hover .go{transform:scale(1.2) translateX(4px)}

@keyframes gc-drift{from{scale:1;translate:0 0}to{scale:1.09;translate:-2.2% 1.4%}}
@keyframes gc-twinkle{0%,100%{opacity:0;scale:.4}45%{opacity:.95;scale:1}60%{opacity:.5;scale:.8}}
@keyframes gc-sheen{0%{opacity:0;translate:0 0}18%{opacity:1}100%{opacity:0;translate:520% 0}}
@keyframes gc-rise{0%{transform:translateY(26px) rotateX(12deg) scale(.97)}
  60%{transform:translateY(-5px) rotateX(-3deg) scale(1.01)}100%{transform:translateY(0) rotateX(0) scale(1)}}
@media (max-width:640px){
  .gc-plate img{object-position:16% var(--gc-y,50%)}
  /* بطاقةٌ أضيق: الستارةُ أعرض ليبقى السطرُ الثاني مقروءًا فوق اللوحة */
  :is(.grade-card.premium,.stage-card).gc-live::after{
    background:linear-gradient(to left, var(--s1) 0%, var(--s1) 40%, transparent 84%),
               linear-gradient(to top, rgba(0,0,0,.5), transparent 52%)}
  html[dir="ltr"] :is(.grade-card.premium,.stage-card).gc-live::after{
    background:linear-gradient(to right, var(--s1) 0%, var(--s1) 40%, transparent 84%),
               linear-gradient(to top, rgba(0,0,0,.5), transparent 52%)}
}
@media (prefers-reduced-motion:reduce){
  :is(.grade-card.premium,.stage-card).gc-live,.gc-plate img{transition:none;animation:none;transform:none}
  .gc-sparks i{animation:none;opacity:.45}
  :is(.grade-card.premium,.stage-card).gc-live:hover .gc-sheen::before,:is(.grade-card.premium,.stage-card).gc-live:focus-visible .gc-sheen::before{animation:none}
}

/* ------------------------------------------------------- شريط المزايا --- */
.feat-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(9px,.9vw,16px);
  margin-top:clamp(20px,2.2vw,40px)}
.feat-strip .it{display:flex;align-items:flex-start;gap:clamp(9px,.9vw,14px);
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(12px,1.1vw,18px);box-shadow:var(--sh-1);
  transition:transform .2s cubic-bezier(.2,.8,.3,1), box-shadow .2s, border-color .2s}
.feat-strip .it:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:transparent}
.feat-strip .ic{width:clamp(34px,2.7vw,44px);aspect-ratio:1;border-radius:12px;flex:none;
  display:grid;place-items:center;color:#fff;
  background:linear-gradient(145deg,var(--s1,#0b2542),var(--s2,#1b4677))}
.feat-strip .ic svg{width:52%;height:52%}
.feat-strip b{display:block;font-size:var(--font-size-body);color:var(--text-dark);
  font-weight:var(--font-weight-bold)}
.feat-strip span{display:block;margin-top:3px;font-size:var(--font-size-caption);
  color:var(--muted);line-height:var(--line-height-relaxed,1.7)}

/* --------------------------------------------- دعوة المتابعة في الصفّ --- */
.grade-cta{position:relative;overflow:hidden;border-radius:var(--r-lg);color:#fff;
  margin-top:clamp(22px,2.4vw,42px);padding:clamp(18px,2vw,34px);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:clamp(12px,1.4vw,26px);
  background:radial-gradient(90% 150% at 96% 0%, rgba(22,135,255,.34), transparent 60%),
             linear-gradient(125deg,var(--navy-900),var(--navy-700));
  box-shadow:var(--sh-2)}
.grade-cta::after{content:"";position:absolute;inset-inline-start:-6%;inset-block-end:-64%;
  width:min(300px,44%);aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle, rgba(245,183,46,.22), transparent 66%)}
.grade-cta .tx{position:relative;min-width:0}
.grade-cta b{display:block;font-size:var(--font-size-h3);font-weight:var(--font-weight-black)}
.grade-cta p{margin:5px 0 0;color:#cfe0f2;font-size:var(--font-size-body-sm);max-width:60ch}
.grade-cta .b{position:relative;flex:none;display:inline-flex;align-items:center;gap:9px;
  padding:12px 24px;border-radius:var(--r-pill);font-weight:var(--font-weight-bold);
  font-size:var(--font-size-btn,var(--font-size-body-sm));
  color:#2a1d02;background:linear-gradient(120deg,var(--gold-soft),var(--gold));
  box-shadow:var(--sh-gold);transition:transform .18s cubic-bezier(.2,.8,.3,1), filter .18s}
.grade-cta .b:hover{transform:translateY(-2px);filter:brightness(1.05)}
.grade-cta .b svg{width:1.15em;height:1.15em}

/* المادة المسنَدة للطالب تُميَّز بإطار خفيف لا بلون وحده */
.subj-card.assigned{outline:2.5px solid var(--success);outline-offset:2px}
.subj-card.assigned::before{content:"✓";position:absolute;top:8px;inset-inline-start:8px;
  z-index:2;width:20px;height:20px;border-radius:50%;background:var(--success);color:#fff;
  display:grid;place-items:center;font-size:12px;font-weight:900}

/* ------------------------------------------------- الحالة الفارغة ----- */
.empty-state{display:grid;justify-items:center;gap:9px;text-align:center;
  background:#fff;border:1px dashed var(--line-2,#cfdcea);border-radius:var(--r-lg);
  padding:clamp(26px,3vw,52px) clamp(16px,2vw,32px)}
.empty-state .ic{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;
  background:var(--surface);color:var(--navy-700)}
.empty-state .ic svg{width:52%;height:52%}
.empty-state b{font-size:var(--font-size-h3);color:var(--text-dark)}
.empty-state span{font-size:var(--font-size-body-sm);color:var(--muted);max-width:44ch}
.empty-state .b{margin-top:8px;display:inline-flex;align-items:center;gap:8px;
  padding:10px 20px;border-radius:var(--r-pill);font-weight:var(--font-weight-bold);
  font-size:var(--font-size-body-sm)}
.empty-state .b.pri{background:var(--navy-900);color:#fff}

/* ------------------------------------------- القائمة المنسدلة للمراحل - */
.nav-drop{position:relative;display:inline-flex;align-items:center}
.nav-drop>a{display:inline-flex;align-items:center;gap:5px}
.nav-drop .caret{display:inline-flex;transition:transform .2s}
.nav-drop .caret svg{width:1.05em;height:1.05em}
.nav-drop.open .caret{transform:rotate(180deg)}
.drop-menu{position:absolute;top:calc(100% + 12px);inset-inline-start:50%;
  transform:translateX(50%) translateY(-6px);min-width:250px;background:#fff;
  border-radius:var(--r);box-shadow:var(--sh-2);padding:7px;z-index:90;
  opacity:0;visibility:hidden;transition:opacity .18s, transform .2s, visibility .2s}
html[dir="ltr"] .drop-menu{transform:translateX(-50%) translateY(-6px)}
.nav-drop.open .drop-menu{opacity:1;visibility:visible;transform:translateX(50%)}
html[dir="ltr"] .nav-drop.open .drop-menu{transform:translateX(-50%)}
.drop-menu a{display:block;padding:10px 13px;border-radius:10px;text-align:start}
.drop-menu a:hover{background:var(--surface)}
.drop-menu b{display:block;font-size:var(--font-size-body-sm);
  font-weight:var(--font-weight-bold);color:var(--text-dark)}
.drop-menu span{display:block;font-size:var(--font-size-caption);color:var(--muted)}

/* --------------------------------------------- صفّ الدعوة الختامية ---- */
/* الحشوُ العلويُّ كان صفرًا، فكان الشريطُ يلتصق ببطاقات المميّزات فوقَه
   (بلاغ المالك). فاصلٌ رأسيٌّ بمقدار إيقاع الأقسام نفسِه. */
.cta-row{padding:clamp(28px,4vw,64px) var(--pad) 0}
.cta-row .cta-card{min-height:clamp(190px,14vw,250px)}
.cta-row .cta-card .in{width:min(54%,460px)}

/* ==================================================== قسم المواد ====== */
/* ================================================== قسم المواد ========= */
.subjects{
  position:relative;z-index:3;background:transparent;
  padding:0 var(--pad) clamp(20px,2vw,34px);
  margin-top:clamp(-84px,-5.6vw,-58px);
}
.subjects-head{
  display:flex;align-items:flex-end;justify-content:flex-start;
  gap:clamp(12px,1.4vw,26px);
  height:clamp(58px,5.6vw,86px);padding-bottom:clamp(8px,.8vw,14px);
}
.subjects-head .tt{text-align:right;color:#fff;text-shadow:0 2px 16px rgba(0,0,0,.6)}
.subjects-head h2{margin:0;font-size:clamp(17px,1.42vw,23px);font-weight:900}
.subjects-head p{margin:2px 0 0;font-size:clamp(11px,.82vw,13.4px);color:#d3e0ef}
.carousel-ctl{display:flex;gap:9px}
.carousel-ctl button{
  width:clamp(30px,2.3vw,38px);aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.92);
  color:var(--navy-900);display:grid;place-items:center;box-shadow:var(--sh-1);transition:.16s
}
.carousel-ctl button:hover:not(:disabled){background:#fff;transform:translateY(-1px)}
.carousel-ctl button:disabled{opacity:.4;cursor:default}
.carousel-ctl svg{width:44%;height:44%}

/* العمود الجانبي أوّلًا في DOM ليقع يمينًا في RTL كما في التصميم المعتمد */
.subjects-body{display:grid;grid-template-columns:clamp(230px,17vw,268px) 1fr;
  gap:clamp(10px,1vw,16px);align-items:start}

/* شبكة متوازنة: أربع بطاقات في الصف على سطح المكتب، ثم ثلاث فاثنتان فواحدة.
   لا صفّ أخير ببطاقات متضخّمة — كل البطاقات بمقاس واحد. */
.subj-grid{display:grid;gap:clamp(9px,.85vw,15px);
  grid-template-columns:repeat(auto-fill,minmax(clamp(250px,23vw,330px),1fr));min-width:0}
/* شبكة المواد تبقى في مدى ٣–٤ أعمدة: على الشاشات العريضة جدًّا يقصرها
   auto-fill إلى خمسة فتضيق البطاقة وتفقد رسمها، فنثبّتها أربعة. */
@media (min-width:1500px){
  .subj-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}


.subj-card{
  position:relative;overflow:hidden;border-radius:var(--r);
  min-height:clamp(118px,8.6vw,150px);
  color:#fff;text-align:right;isolation:isolate;display:block;width:100%;
  box-shadow:var(--sh-1);
  transition:transform .24s cubic-bezier(.2,.8,.3,1), box-shadow .24s
}
.subj-card:hover{transform:translateY(-5px);box-shadow:var(--sh-2)}
.subj-card:active{transform:translateY(-1px) scale(.995)}
.subj-card .bg{position:absolute;inset:0;z-index:-3}
/* وهج علوي خفيف يعطي البطاقة عمقًا وإضاءة */
.subj-card::before{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:radial-gradient(130% 100% at 12% 0%, rgba(255,255,255,.22), transparent 58%)}
.subj-card .art{
  position:absolute;inset-block:0;left:0;width:46%;z-index:-1;pointer-events:none;
  /* التلاشي في CSS لا في الملف: يبقى صحيحًا مهما اقتُصّت الصورة مع cover،
     ويجعل الرسم يذوب في تدرّج البطاقة بلا حدّ مستقيم. */
  -webkit-mask-image:linear-gradient(to left, transparent 0%, #000 40%, #000 82%, transparent 99%);
          mask-image:linear-gradient(to left, transparent 0%, #000 40%, #000 82%, transparent 99%);
  transition:transform .34s cubic-bezier(.2,.8,.3,1)
}
.subj-card .art img{width:100%;height:100%;object-fit:cover;object-position:center left;display:block}
/* الرسوم الاحتياطية (SVG) ترسم كعنصر لا كخلفية ممتدّة */
.subj-card .art img[src$=".svg"]{object-fit:contain;padding:6% 4%;
  filter:drop-shadow(0 10px 20px rgba(0,0,0,.3))}
.subj-card:hover .art{transform:scale(1.05)}
/* تعتيم متدرّج جهة النصّ يضمن التباين فوق أي رسم */
.subj-card::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(to left, rgba(0,0,0,.34) 0%, rgba(0,0,0,.1) 42%, transparent 66%)}
.subj-card .txt{padding:clamp(11px,1vw,17px) clamp(13px,1.1vw,19px) 0;
  max-width:64%;margin-inline-start:auto}
.subj-card h3{margin:0;font-size:var(--font-size-h3);font-weight:var(--font-weight-black);
  text-shadow:0 2px 12px rgba(0,0,0,.55)}
.subj-card p{margin:4px 0 0;font-size:var(--font-size-caption);line-height:1.55;
  color:rgba(255,255,255,.9);text-shadow:0 1px 9px rgba(0,0,0,.55)}
.subj-card .go{
  position:absolute;left:clamp(11px,1vw,17px);bottom:clamp(10px,.9vw,16px);
  width:clamp(26px,2vw,34px);aspect-ratio:1;border-radius:50%;background:#fff;
  display:grid;place-items:center;box-shadow:0 6px 16px -7px rgba(0,0,0,.75);
  transition:transform .22s cubic-bezier(.2,.8,.3,1)
}
.subj-card .go svg{width:46%;height:46%}
.subj-card:hover .go{transform:scale(1.14) translateX(-3px)}
html[dir="ltr"] .subj-card:hover .go{transform:scale(1.14) translateX(3px)}
.subj-card .chips{display:flex;gap:7px;position:absolute;bottom:clamp(10px,.85vw,15px);
  right:clamp(13px,1.1vw,19px);direction:ltr;font-size:clamp(9px,.66vw,11px);
  font-weight:var(--font-weight-semibold);color:rgba(255,255,255,.94)}
.subj-card .chips span+span{border-inline-start:1px solid rgba(255,255,255,.4);padding-inline-start:7px}

/* ================================================== العمود الجانبي ===== */
.rail{display:grid;gap:clamp(10px,1vw,16px)}
.card-w{background:#fff;border-radius:var(--r);box-shadow:var(--sh-1);padding:clamp(12px,1.05vw,18px)}

.quiz h3{margin:0;text-align:center;font-size:clamp(13px,1.02vw,16.5px);font-weight:900;
  color:var(--text-dark);display:flex;flex-direction:row-reverse;align-items:center;
  justify-content:center;gap:9px}
.quiz h3 .tro{font-size:1.5em;line-height:1}
.quiz .q{margin:clamp(9px,.9vw,15px) 0 0;font-size:clamp(11px,.82vw,13.4px);
  color:#3d4f68;text-align:center;line-height:1.7;min-height:2.6em}
.quiz .opts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:clamp(9px,.85vw,14px);
  direction:ltr}
.quiz .opts button{
  border:1.5px solid var(--line);border-radius:10px;padding:clamp(6px,.55vw,10px) 4px;
  font-weight:700;font-size:clamp(11px,.82vw,13.6px);color:#33455e;background:#fff;
  transition:.16s;direction:ltr
}
.quiz .opts button:hover:not(:disabled){border-color:var(--blue-light);color:var(--blue-primary)}
.quiz .opts button:disabled{cursor:default}
.quiz .opts button.ok{background:#e9f9f1;border-color:var(--success);color:#0d7a4f}
.quiz .opts button.no{background:#fdeeee;border-color:var(--danger);color:#a63333}
.quiz .fb{margin-top:clamp(8px,.8vw,13px);text-align:center;font-weight:800;
  font-size:clamp(11px,.84vw,13.8px);display:flex;align-items:center;justify-content:center;
  gap:8px;min-height:1.5em}
.quiz .fb.ok{color:var(--success)} .quiz .fb.no{color:var(--danger)}
.quiz .fb svg{width:1.15em;height:1.15em}
.quiz .again{margin-top:clamp(6px,.6vw,11px);width:100%;display:flex;align-items:center;
  justify-content:center;gap:9px;color:var(--blue-primary);font-weight:800;
  font-size:clamp(11px,.82vw,13.4px);padding:7px}
.quiz .again:hover{text-decoration:underline}
.quiz .again svg{width:1.2em;height:1.2em}
.quiz .note{margin:6px 0 0;text-align:center;font-size:10.5px;color:var(--muted)}

/* ============================================ القسم السفلي (3 أعمدة) ==== */
/* ترتيب DOM: الرحلة (يمينًا وأوسع) ثم السؤال ثم التقدّم — يقرأ من اليمين
   بترتيب المواصفة: كيف تتعلم ← سؤال تجريبي ← نموذج التقدّم */
.lower{display:grid;grid-template-columns:1fr clamp(240px,19.5vw,310px) clamp(240px,20vw,320px);
  gap:clamp(10px,1vw,16px);align-items:stretch;
  padding:0 var(--pad) clamp(18px,1.8vw,30px)}

.journey h2,.progress h2{margin:0 0 clamp(10px,1vw,18px);text-align:center;
  font-size:var(--font-size-h2);font-weight:var(--font-weight-black);
  color:var(--text-dark);position:relative}
.journey h2::before,.journey h2::after{content:"";position:absolute;top:50%;width:clamp(20px,4vw,90px);
  height:1px;background:var(--line)}
.journey h2::before{inset-inline-start:0} .journey h2::after{inset-inline-end:0}

.steps{display:flex;align-items:flex-start;justify-content:space-between;gap:2px}
.step{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;flex:1 1 0;min-width:0}
.step .ic{width:clamp(38px,3.1vw,52px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;
  color:#fff;box-shadow:0 8px 18px -10px rgba(6,24,43,.7);transition:transform .2s}
.step:hover .ic{transform:translateY(-3px) scale(1.04)}
.step .ic svg{width:48%;height:48%}
.step b{font-size:clamp(11.5px,.86vw,14.2px);color:var(--text-dark)}
.step span{font-size:clamp(9.5px,.7vw,11.6px);color:var(--muted);line-height:1.5}
.step-arrow{align-self:center;margin-top:clamp(14px,1.2vw,20px);color:#c3cfdd;flex:none}
.step-arrow svg{width:clamp(14px,1.15vw,20px);height:clamp(14px,1.15vw,20px)}

.progress-body{display:grid;grid-template-columns:1fr auto;gap:clamp(10px,1vw,18px);align-items:center}
.ring{position:relative;width:clamp(84px,6.4vw,104px);aspect-ratio:1;flex:none}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring .val{position:absolute;inset:0;display:grid;place-items:center;font-weight:900;
  font-size:clamp(17px,1.35vw,22px);color:var(--text-dark)}
.ring-cap{text-align:center;font-size:clamp(10px,.74vw,12.2px);color:var(--muted);margin-top:5px}
.prog-list{display:grid;gap:clamp(6px,.6vw,11px);margin:0;padding:0;list-style:none}
.prog-list li{display:flex;flex-direction:row-reverse;align-items:center;justify-content:flex-end;
  gap:9px;font-size:clamp(10.5px,.78vw,13px);color:#3d4f68}
.prog-list .ic{width:1.9em;height:1.9em;border-radius:8px;display:grid;place-items:center;flex:none}
.prog-list .ic svg{width:58%;height:58%}

.cta-card{
  position:relative;overflow:hidden;border-radius:var(--r-lg);min-height:clamp(190px,14vw,250px);
  background-color:#20344c; background-image:url("/assets/media/cta.jpg");
  background-repeat:no-repeat; background-size:cover; background-position:center;
  display:flex;align-items:center;box-shadow:var(--sh-2)
}
/* طبقةٌ عموديّة: لا يمينَ فيها ولا يسار، فتصحّ في الاتّجاهين. */
.cta-card::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(6,24,43,.82),rgba(6,24,43,.34) 62%,rgba(6,24,43,.16))}
/* تعتيمٌ جانبيٌّ ناعمٌ يتبع حافّةَ البداية في اللغتين. كان بقعةً شعاعيّةً تترك
   حدًّا ظاهرًا وسطَ الصورة (بلاغ المالك)؛ والتدرّجُ الخطّيُّ الممتدُّ لا حدَّ له.
   ويُقلب بقاعدةٍ واحدةٍ عند تبديل الاتجاه بدل خاصيّةٍ منطقيّةٍ لا تقبل التدرّج. */
.cta-card::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to left,
    rgba(7,19,35,.92) 0%,rgba(7,19,35,.72) 26%,rgba(7,19,35,.34) 52%,transparent 76%)}
[dir="ltr"] .cta-card::after{background:linear-gradient(to right,
  rgba(7,19,35,.92) 0%,rgba(7,19,35,.72) 26%,rgba(7,19,35,.34) 52%,transparent 76%)}
/* الكتلةُ كانت محصورةً في ٢٠ حرفًا بمحاذاةٍ يمينيّةٍ مفروضة، فبدا العنوانُ
   موسَّطًا والنصُّ معلّقًا في طرفٍ بعيد. صارت عمودًا منطقيَّ الاتّجاه: كلُّ
   العناصر على خطٍّ واحدٍ يبدأ من حافّةٍ واحدة. */
.cta-card .in{position:relative;z-index:1;margin-inline:clamp(16px,2vw,40px) auto;
  width:min(58%,460px);text-align:start;
  display:flex;flex-direction:column;align-items:flex-start;gap:clamp(8px,.7vw,13px);
  padding:clamp(14px,1.3vw,22px) clamp(16px,1.5vw,26px);border-radius:var(--r);
  background:rgba(8,22,40,.38);border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(7px) saturate(120%);-webkit-backdrop-filter:blur(7px) saturate(120%);
  box-shadow:0 18px 40px -26px rgba(0,0,0,.9)}
.cta-card .in::before{content:"";position:absolute;inset-block:clamp(14px,1.2vw,22px);
  inset-inline-start:0;width:3px;border-radius:99px;
  background:linear-gradient(var(--gold-soft),var(--gold-deep))}
.cta-card h2{margin:0;color:#fff;font-size:var(--font-size-h1);font-weight:900;
  line-height:var(--line-height-heading);text-shadow:0 2px 10px rgba(0,0,0,.55)}
.cta-card p{margin:0;color:#e2ebf6;font-size:var(--font-size-body);
  line-height:1.85;max-width:36ch;text-wrap:pretty}
.cta-card .btn-gold{margin-top:clamp(2px,.3vw,6px);font-size:var(--font-size-button);
  padding:clamp(9px,.8vw,13px) clamp(16px,1.4vw,26px)}

/* ========================================== عن المنصّة / المميزات ====== */
.info{padding:clamp(20px,2vw,38px) var(--pad) 0}
/* الحافّةُ نفسُها التي تقف عندها بطاقاتُ المراحل وشريطُ الدعوة وصندوقُ التواصل:
   كان سقفُ ١٢٢٠px يجعل بطاقاتِ المميّزات أضيقَ من جاراتها فتبدو غيرَ مصطفّة. */
.info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:clamp(10px,1vw,16px)}
/* العنوانُ يحمل شريطًا ذهبيًّا يربطه ببقيّة المنصّة، والفقرةُ تضيق إلى مقاسِ
   قراءةٍ مريح: السطرُ الطويلُ الموسَّط كان يترك حوافَّ مهترئةً في العربيّة. */
.info h2{margin:0 0 clamp(14px,1.2vw,20px);font-size:var(--font-size-h2);
  font-weight:var(--font-weight-black);text-align:center;position:relative;
  padding-bottom:clamp(9px,.8vw,14px)}
.info h2::after{content:'';position:absolute;inset-block-end:0;inset-inline-start:50%;
  transform:translateX(-50%);width:clamp(42px,4vw,64px);height:3px;border-radius:99px;
  background:linear-gradient(90deg,var(--gold),rgba(217,154,18,.25))}
.info .lede{max-width:58ch;margin:0 auto clamp(18px,1.8vw,30px);text-align:center;color:#55677f;
  font-size:clamp(12.5px,.9vw,15.4px);line-height:2.05;text-wrap:balance}

/* ===== «عن المنصّة» — لوحٌ بعمودين ==========================================
   `.info` مشتركةٌ بين #about و#features، فكلُّ ما يلي مقصورٌ على #about وحدَه.
   الفقرةُ العربيّةُ الموسَّطةُ متعدّدةُ الأسطر تترك حوافَّ مهترئة؛ فصارت بمحاذاة
   البداية داخل لوحٍ له حدٌّ وظلٌّ كبقيّة أقسام الصفحة. */
#about{padding:clamp(28px,4vw,64px) var(--pad) 0}
#about .about-card{position:relative;overflow:hidden;
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-1);padding:clamp(20px,2.2vw,40px);
  display:grid;gap:clamp(14px,1.8vw,34px);grid-template-columns:minmax(0,1fr);align-items:start}
@media (min-width:860px){
  /* العمودُ الأوّلُ يضيق والثاني يُقيَّد بمقاس قراءةٍ حقيقيّ: كان يتمدّد إلى
     ٨٠٦px فتتفاوت أطوالُ الأسطر ويبقى آخرُها يتيمًا. */
  #about .about-card{grid-template-columns:minmax(180px,.26fr) minmax(0,1fr);
    align-items:center;gap:clamp(16px,2.4vw,48px)}
}
#about .about-card::before{content:'';position:absolute;inset-block:0;inset-inline-start:0;
  width:4px;background:linear-gradient(var(--gold),rgba(217,154,18,0))}
#about .about-card::after{content:'';position:absolute;inset-block-start:-46%;inset-inline-end:-8%;
  width:min(42%,380px);aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(22,135,255,.09),transparent 70%)}
#about .about-head{position:relative;display:flex;flex-direction:column;
  align-items:flex-start;gap:clamp(10px,1vw,16px)}
/* خيطٌ ذهبيٌّ قصيرٌ تحت العنوان يربط العمودَ بالفقرة بدل أن يطفو وحدَه */
#about .about-head::after{content:'';width:clamp(34px,3vw,52px);height:3px;border-radius:99px;
  background:linear-gradient(90deg,var(--gold),rgba(217,154,18,.2))}
#about .about-ic{width:clamp(38px,3vw,50px);aspect-ratio:1;border-radius:14px;
  display:grid;place-items:center;color:#fff;flex:none;
  background:linear-gradient(140deg,var(--blue-primary),var(--navy-700));
  box-shadow:0 10px 24px -12px rgba(22,135,255,.8)}
#about .about-ic svg{width:52%;height:52%}
#about h2{margin:0;padding:0;text-align:start;font-size:clamp(19px,1.7vw,30px);
  line-height:var(--line-height-heading)}
#about h2::after{display:none}
/* المقاسُ بالبكسل لا بـ`ch`: وحدةُ ch تقيس عرضَ الرقم صفر، وهي أضيقُ بكثيرٍ من
   متوسّط الحرف العربيّ — فكانت ٥٢ch تعني ٤٠٤px، فتترك نصفَ العمود فارغًا. */
#about .lede{margin:0;max-width:min(100%,720px);text-align:start;text-wrap:pretty;
  color:#55677f;font-size:var(--font-size-body-lg);line-height:2.15;letter-spacing:.1px}
@media (max-width:860px){
  #about .lede{font-size:var(--font-size-body);max-width:none}
}
.feat-card{background:#fff;border-radius:var(--r);box-shadow:var(--sh-1);padding:clamp(13px,1.1vw,20px);
  text-align:right}
.feat-card .ic{width:clamp(34px,2.6vw,44px);aspect-ratio:1;border-radius:12px;display:grid;
  place-items:center;color:#fff;margin-bottom:9px}
.feat-card .ic svg{width:50%;height:50%}
.feat-card b{display:block;font-size:clamp(12.5px,.94vw,15.4px);color:var(--text-dark)}
.feat-card span{display:block;margin-top:4px;font-size:clamp(10.5px,.78vw,13px);color:var(--muted);line-height:1.65}

.contact{padding:clamp(28px,4vw,64px) var(--pad) 0}
/* تواصل معنا — أُعيد تصميمُه ٢٠٢٦-٠٩-٢٣.
   كان الصفُّ مقلوبًا بـ`row-reverse` والنصُّ مُجبَرًا على `text-align:right`، فكان
   القسمُ يبدو مائلًا في الواجهة الإنجليزيّة. صار كلُّ شيءٍ منطقيَّ الاتّجاه
   (‏start/end) فيستقيم في اللغتين بلا قاعدةٍ ثانية. وأُضيف نداءٌ ظاهرٌ للفعل. */
.contact-box{background:linear-gradient(140deg,var(--navy-900),var(--navy-800));
  border:1px solid rgba(255,255,255,.07);border-radius:var(--r-lg);box-shadow:var(--sh-2);
  padding:clamp(20px,2vw,38px);color:#fff;display:grid;grid-template-columns:minmax(0,1fr);
  gap:clamp(18px,2vw,40px);align-items:center;position:relative;overflow:hidden}
/* عمودان صريحان لا `auto-fit`: الأخيرُ كان يُنشئ مسارًا ثالثًا صفريَّ العرض ثمّ
   يوسّع المسارين فيفيض المحتوى خارج الصندوق. و`minmax(0,1fr)` يمنع المحتوى
   الطويل (البريد) من فرض عرضٍ أدنى يكسر الشبكة. */
@media (min-width:820px){
  .contact-box{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
.contact-box::before{content:'';position:absolute;inset-block-start:-40%;inset-inline-end:-10%;
  width:min(46%,420px);aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(37,211,102,.14),transparent 70%)}
.contact-intro{position:relative}
.contact-box h2{margin:0 0 8px;font-size:clamp(16px,1.35vw,23px);font-weight:900;text-align:start}
.contact-box p{margin:0;color:#c6d6e8;font-size:clamp(11.5px,.85vw,14px);line-height:1.9;text-align:start}

/* أزرارُ الفعل: واتساب أوّلًا لأنّه الأسرع ردًّا، والبريدُ سندًا موثّقًا. */
.contact-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(12px,1.1vw,18px)}
.c-btn{display:inline-flex;align-items:center;gap:9px;padding:10px 18px;border-radius:999px;
  font-size:clamp(11.5px,.85vw,14px);font-weight:800;text-decoration:none;
  border:1px solid rgba(255,255,255,.22);color:#eaf2fb;background:rgba(255,255,255,.06);
  transition:transform .15s ease,background .15s ease,border-color .15s ease}
.c-btn svg{width:1.25em;height:1.25em;flex:none}
.c-btn:hover{transform:translateY(-1px);background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.4)}
.c-btn.wa{background:#25d366;border-color:#25d366;color:#06301a;box-shadow:0 6px 18px rgba(37,211,102,.24)}
.c-btn.wa:hover{background:#1fbb5a;border-color:#1fbb5a}
/* تليجرام: القناةُ التي توصل باسم المستخدم لا بالرقم — الدليل ٢٦ §٥ */
.c-btn.tg{background:#229ed9;border-color:#229ed9;color:#04283a;box-shadow:0 6px 18px rgba(34,158,217,.26)}
.c-btn.tg:hover{background:#1b87ba;border-color:#1b87ba}
.c-btn.mail{background:var(--gold);border-color:var(--gold);color:#3a2800;
  box-shadow:0 6px 18px rgba(217,154,18,.26)}
.c-btn.mail:hover{background:var(--gold-deep);border-color:var(--gold-deep)}

/* البطاقات: صفٌّ لكلّ قناةٍ بفاصلٍ خفيف، لا قائمةُ نقاطٍ مرصوصة. */
.contact-list{display:grid;gap:2px;margin:0;padding:0;list-style:none;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);
  border-radius:calc(var(--r-lg) - 6px);overflow:hidden}
.contact-list li{display:flex;align-items:center;gap:12px;padding:clamp(10px,.9vw,15px) clamp(12px,1vw,18px);
  background:rgba(255,255,255,.02);font-size:clamp(11px,.82vw,13.6px);color:#e5eefa}
.contact-list li + li{box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.c-ic{display:grid;place-items:center;width:34px;height:34px;flex:none;border-radius:11px;
  background:rgba(255,255,255,.08);color:var(--gold)}
.c-ic.wa{background:rgba(37,211,102,.16);color:#3ee07d}
.c-ic.tg{background:rgba(34,158,217,.18);color:#5cc4f0}
.c-ic svg{width:18px;height:18px}
.c-txt{display:flex;flex-direction:column;gap:1px;min-width:0;text-align:start}
.c-txt b{font-weight:800;color:#fff}
.c-txt em{font-style:normal;color:#aec4dc;font-size:.94em}
.contact-list a{color:#fff;font-weight:700;text-decoration:none;word-break:break-all}
.contact-list a:hover{text-decoration:underline}

/* نموذجُ التواصل — القناةُ التي تعمل لكلّ زائرٍ بلا تطبيقٍ ولا حساب.
   يمتدّ على العمودين لأنّه القناةُ الأولى لا تكملةً جانبيّة. */
.c-form{position:relative;grid-column:1/-1;display:grid;gap:10px;margin-top:clamp(6px,.6vw,12px);
  padding-top:clamp(16px,1.6vw,26px);border-top:1px solid rgba(255,255,255,.1)}
.c-form h3{margin:0;color:#fff;font-size:clamp(14px,1.05vw,17px);font-weight:800;text-align:start}
.c-hint{margin:0;color:#aec4dc;font-size:clamp(11px,.8vw,13px);text-align:start}
.c-row{display:grid;gap:10px;grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){.c-row{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)}}
.c-in{width:100%;font:inherit;font-size:clamp(12px,.85vw,14px);color:#fff;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  border-radius:12px;padding:11px 14px;transition:border-color .15s ease,background .15s ease}
.c-in::placeholder{color:#93a9c2}
.c-in:focus{outline:none;background:rgba(255,255,255,.1);border-color:var(--gold)}
.c-ta{resize:vertical;min-height:84px;line-height:1.8}
/* مصيدةُ الآليّات: مخفيّةٌ عن العين وقارئِ الشاشة، ولا يملؤها إلا برنامج.
   الإخفاءُ بالقصّ لا بالإزاحة ٩٩٩٩ بكسل: الإزاحةُ تمدّ الصفحةَ فتُحدث فيضًا
   أفقيًّا (قِيس ٩٠ بكسل في الاتجاه العربيّ). */
.c-hp{position:absolute;width:1px;height:1px;padding:0;margin:0;border:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;opacity:0;pointer-events:none}
.c-act{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.c-act .c-btn{border:0;cursor:pointer}
.c-act .c-btn:disabled{opacity:.6;cursor:progress}
.c-msg{font-size:clamp(11px,.8vw,13px);font-weight:700}
.c-msg.ok{color:#5be08a}
.c-msg.err{color:#ff9b9b}

/* ========================================================= التذييل ===== */
/* أُعيد بناؤه ٢٠٢٦-٠٩-٢٣: كان صفًّا واحدًا مزدحمًا بخمس شاراتٍ `nowrap` بجوار
   صورةِ أفقٍ مقطوعةٍ على الحافّة، بلا تدرّجٍ بصريّ. صار ثلاثَ طبقات: الهويّة،
   ثمّ الشاراتُ شبكةً تتنفّس، ثمّ شريطٌ سفليٌّ أخفتُ للحقوق والروابط. */
.lp-footer{
  position:relative;margin-top:clamp(28px,4vw,64px);
  background:var(--navy-950);color:#cfe0f2;overflow:hidden;
  /* منطقةٌ آمنةٌ لزرّ الصوت العائم في زاوية الشاشة (widget خارجيّ لا نتحكّم فيه) */
  --foot-safe:clamp(56px,6vw,88px)
}
.lp-footer::before{content:'';position:absolute;inset-inline:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(245,183,46,.5),transparent)}

/* الأفق: شريطٌ سفليٌّ كامل العرض متلاشٍ إلى أعلى — خلفيّةٌ لا جارٌ مقطوع. */
.lp-footer .sky{position:absolute;inset-inline:0;bottom:0;height:min(58%,190px);
  opacity:.3;pointer-events:none;
  -webkit-mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.55) 46%,transparent 100%);
  mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.55) 46%,transparent 100%)}
.lp-footer .sky img{width:100%;height:100%;object-fit:cover;object-position:center bottom}

.foot-in{position:relative;z-index:1;max-width:var(--maxw);margin-inline:auto;
  display:grid;gap:clamp(18px,2.2vw,30px);
  padding:clamp(26px,3vw,46px) var(--pad) clamp(18px,2vw,30px)}

.foot-brand{display:flex;align-items:center;justify-content:center;
  gap:clamp(10px,1vw,16px);text-align:center}
.foot-brand .mk{width:clamp(38px,3vw,50px);aspect-ratio:1;border-radius:13px;flex:none;
  background:linear-gradient(150deg,#1a4d86,#0b2542);display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.16);box-shadow:0 8px 20px -10px rgba(0,0,0,.9)}
.foot-brand .mk svg{width:64%;height:64%}
.foot-tag{margin:0;color:#fff;font-size:clamp(15px,1.35vw,22px);font-weight:800;
  line-height:1.4;letter-spacing:-.2px}

/* الشارات: شبكةٌ تتنفّس — لا صفٌّ واحدٌ مرصوصٌ بـ`nowrap`. */
.foot-marks{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));
  gap:clamp(9px,.9vw,14px);margin:0;padding:0;list-style:none}
.foot-marks li{display:flex;align-items:center;gap:11px;list-style:none;
  padding:clamp(10px,.9vw,14px) clamp(11px,1vw,16px);border-radius:var(--r);
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.075);
  color:#dbe8f6;font-size:clamp(11.5px,.8vw,13.5px);font-weight:600;line-height:1.45;
  text-align:start;transition:background .18s ease,border-color .18s ease}
.foot-marks li:hover{background:rgba(255,255,255,.075);border-color:rgba(245,183,46,.32)}
.foot-marks .ic{width:clamp(30px,2.3vw,36px);aspect-ratio:1;border-radius:10px;flex:none;
  display:grid;place-items:center;color:var(--gold-soft);
  background:rgba(22,135,255,.14);border:1px solid rgba(255,255,255,.08)}
.foot-marks .ic svg{width:56%;height:56%}
.foot-marks .tx{min-width:0}

.foot-legal-row{position:relative;z-index:1;border-top:1px solid rgba(255,255,255,.08);
  background:linear-gradient(to top,rgba(6,24,43,.92),rgba(6,24,43,.45))}
.foot-legal-in{max-width:var(--maxw);margin-inline:auto;
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;
  gap:clamp(10px,1.4vw,26px);padding-block:clamp(11px,1vw,16px);
  /* الزوايا السفليّة محجوزةٌ للزرّ العائم في الاتجاهين معًا */
  padding-inline:max(var(--pad),var(--foot-safe))}
.foot-copy{margin:0;text-align:start;color:#9fb6d0;
  font-size:clamp(11px,.78vw,13px);line-height:1.7}
.foot-legal{display:flex;align-items:center;flex-wrap:wrap;margin:0;padding:0;
  list-style:none;gap:6px clamp(11px,1.1vw,20px)}
.foot-legal li{list-style:none;display:flex;align-items:center;
  font-size:clamp(11px,.78vw,13px)}
.foot-legal li + li::before{content:'·';color:#3f5570;font-weight:700;
  margin-inline-end:clamp(11px,1.1vw,20px)}
.foot-legal a{color:#b8cade;text-decoration:none;padding-bottom:2px;
  border-bottom:1px solid transparent;transition:color .15s ease,border-color .15s ease}
.foot-legal a:hover{color:#fff;border-bottom-color:var(--gold)}

/* ---------------------------------------------------------------------------
   صفحة المرحلة بمظهر «زجاج منتصف الليل» (.gc-night) — امتدادٌ للغة لوحة الطالب لا تصميمٌ ثانٍ:
   سطوحٌ كحليّة مدخَّنة بحافّةٍ مضيئة، ولونٌ مشبَّع واحد هو الذهب، وارتدادٌ في الحركة.
   الرموزُ منقولةٌ عن assets/shell-motion.css (--sm-acc · --sm-card · --sm-tile · --sm-inner · --sm-spring · --sm-out)
   بأسماء --gc-* لأنّ صفحات landing لا تحمّل ذلك الملفّ. تُفعَّل لمرحلةٍ لها hero في assets/stages.js.
   --------------------------------------------------------------------------- */
.gc-night,.gc-night-body{
  --gc-gold:#f5b72e;--gc-gold-2:#ffd874;--gc-gold-ink:#06182b;--gc-gold-glow:rgba(245,183,46,.55);
  --gc-bg0:#040d19;
  --gc-card:linear-gradient(180deg,#12284a,#0c1d35);--gc-card-edge:rgba(255,255,255,.08);
  --gc-card-drop:0 18px 40px -22px rgba(0,0,0,.8);
  --gc-tile:rgba(255,255,255,.06);--gc-tile-edge:rgba(255,255,255,.1);
  --gc-inner:inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 1px rgba(255,255,255,.03);
  --gc-spring:cubic-bezier(.3,1.75,.45,1);--gc-out:cubic-bezier(.16,1,.3,1);
}

/* ١) الرأس: مشهدٌ مرسوم تحت تعتيمٍ كحليّ جهة النصّ */
.page-hero.cine.gc-night{background:var(--gc-bg0);isolation:isolate;
  min-height:clamp(340px,29vw,430px);display:flex;flex-direction:column;justify-content:center}
.page-hero.cine.gc-night::after{display:none}
.page-hero.cine.gc-night::before{opacity:.9;
  background:linear-gradient(90deg,transparent,var(--gc-gold) 22%,var(--gc-gold) 78%,transparent)}
.page-hero.gc-night > :not(.gc-hero-plate){position:relative;z-index:1}
.gc-hero-plate{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
/* المشهدُ كاملًا بارتفاع الرأس، مثبَّتًا جهةَ النهاية، ويذوب طرفُه في كحليّ الخلفيّة (لا تكبيرَ يقتطع عناصره) */
.gc-hero-plate img{position:absolute;inset:-6% auto -6% -1.5%;height:112%;width:auto;max-width:none;display:block;
  -webkit-mask-image:linear-gradient(to right,#000 0%,#000 52%,transparent 98%);
          mask-image:linear-gradient(to right,#000 0%,#000 52%,transparent 98%);
  transform:translate3d(calc(var(--gc-px,0) * -18px), calc(var(--gc-py,0) * -10px), 0);
  transition:transform .6s var(--gc-out);
  animation:gc-drift 22s ease-in-out infinite alternate}
.gc-track .gc-hero-plate img{transition:transform .08s linear}
.gc-hero-plate::after{content:"";position:absolute;inset:0;background:
  linear-gradient(to left, rgba(4,13,25,.9) 0%, rgba(4,13,25,.55) 44%, transparent 66%),
  linear-gradient(to top, rgba(4,13,25,.66), transparent 40%)}
/* في LTR تُعكس اللوحةُ وتعتيمُها معًا فيبقى النصُّ على الجانب الهادئ */
html[dir="ltr"] .gc-hero-plate{transform:scaleX(-1)}
.page-hero.gc-night .eyebrow{color:var(--gc-gold)}
.page-hero.gc-night h1{position:relative;display:inline-block;padding-bottom:.3em}
.page-hero.gc-night h1::after{content:"";position:absolute;inset-inline-start:0;bottom:0;width:min(128px,48%);height:3px;
  border-radius:3px;background:linear-gradient(90deg,var(--gc-gold),var(--gc-gold-2));
  box-shadow:0 0 14px var(--gc-gold-glow);transform-origin:right center;
  animation:gc-rule .9s var(--gc-out) .3s backwards}
html[dir="ltr"] .page-hero.gc-night h1::after{transform-origin:left center}
.page-hero.gc-night .pill{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  box-shadow:var(--gc-inner);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.page-hero.gc-night .page-hero-in > div > *{animation:gc-up .7s var(--gc-spring) backwards}
.page-hero.gc-night .page-hero-in > div > :nth-child(2){animation-delay:60ms}
.page-hero.gc-night .page-hero-in > div > :nth-child(3){animation-delay:120ms}
.page-hero.gc-night .page-hero-in > div > :nth-child(4){animation-delay:180ms}
.page-hero.gc-night .page-hero-in > div > :nth-child(5){animation-delay:240ms}

/* عنوانُ القسم بخطٍّ ذهبيّ تحته، وبطاقاتُ الصفوف تنفصل بحافّةٍ مضيئة وهالةٍ زرقاء (بطاقاتُ الموادّ في اللوحة) */
.gc-night-body .sec-head h2{position:relative;display:inline-block;padding-bottom:.28em}
.gc-night-body .sec-head h2::after{content:"";position:absolute;inset-inline-start:0;bottom:0;width:100%;height:3px;border-radius:3px;
  background:linear-gradient(90deg,var(--gc-gold),var(--gc-gold-2))}
.gc-night-body .grade-card.premium.gc-live:not(:hover):not(:focus-visible){
  box-shadow:0 0 0 1px rgba(160,200,255,.34),0 26px 50px -22px rgba(4,13,25,.85),0 0 46px -16px rgba(96,156,240,.55)}

/* ٢) بطاقاتُ المزايا: سطحٌ كحليّ مصمت، قرصٌ ذهبيّ يطفو وتمرّ عليه نبضةُ ذهبٍ بالتتابع، ميلٌ ولمعةٌ تتبع المؤشّر */
.feat-strip.gc-glass{perspective:1200px}
.feat-strip.gc-glass .it{position:relative;overflow:hidden;align-items:center;border-radius:22px;
  background:var(--gc-card);border:1px solid var(--gc-card-edge);box-shadow:var(--gc-card-drop),var(--gc-inner);
  transform:translateY(var(--gc-lift,0px)) rotateX(var(--gc-rx,0deg)) rotateY(var(--gc-ry,0deg));
  transition:transform .52s var(--gc-spring), box-shadow .3s, border-color .3s;
  animation:gc-rise .8s var(--gc-spring) calc(var(--gc-i,0) * 90ms) backwards}
.feat-strip.gc-glass .it.gc-track{transition:transform .08s linear, box-shadow .3s, border-color .3s}
.feat-strip.gc-glass .it:hover{--gc-lift:-8px;border-color:rgba(245,183,46,.42);
  transform:translateY(var(--gc-lift,0px)) rotateX(var(--gc-rx,0deg)) rotateY(var(--gc-ry,0deg));
  box-shadow:0 30px 54px -24px rgba(0,0,0,.85),0 0 0 1px rgba(245,183,46,.22),var(--gc-inner)}
.feat-strip.gc-glass .it::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(220px circle at calc(50% + var(--gc-px,0) * 50%) calc(50% + var(--gc-py,0) * 50%),
    rgba(255,255,255,.17), transparent 62%)}
.feat-strip.gc-glass .it:hover::before{opacity:1}
.feat-strip.gc-glass b{color:#fff}
.feat-strip.gc-glass .it > span:last-child > span{color:#aebfd6}
.feat-strip.gc-glass .ic{position:relative;border-radius:50%;margin-top:0;color:var(--gc-gold-ink);
  background:radial-gradient(circle at 32% 26%, var(--gc-gold-2), var(--gc-gold) 58%, #c98a12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 10px 22px -10px var(--gc-gold-glow);
  animation:gc-floaty 4.6s ease-in-out calc(var(--gc-i,0) * -.9s) infinite}
.feat-strip.gc-glass .ic::after{content:"";position:absolute;inset:-5px;border-radius:50%;
  border:2px solid var(--gc-gold);opacity:0;pointer-events:none;
  animation:gc-pulse 5.2s ease-out calc(var(--gc-i,0) * .65s) infinite}

/* ٣) التذييل: أفقُ النيل ساعةَ الغسق تحت تعتيم، وبلاطاتٌ زجاجيّة بأقراصٍ ذهبيّة تصعد متتابعةً عند الظهور */
.lp-footer.gc-night{background:var(--gc-bg0);
  --gc-gold:#f5b72e;--gc-gold-2:#ffd874;--gc-gold-ink:#06182b;--gc-gold-glow:rgba(245,183,46,.55)}
.lp-footer.gc-night .sky{inset:0;height:auto;opacity:1;overflow:hidden;-webkit-mask-image:none;mask-image:none}
.lp-footer.gc-night .sky img{position:absolute;inset-block:0;inset-inline:-4%;width:108%;height:100%;max-width:none;
  object-fit:cover;object-position:center 76%;animation:gc-pan-x 40s ease-in-out infinite alternate}
.lp-footer.gc-night .sky::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom, rgba(4,13,25,.92) 0%, rgba(4,13,25,.6) 50%, rgba(4,13,25,.14) 100%)}
.lp-footer.gc-night .foot-tag{position:relative;padding-bottom:.4em}
.lp-footer.gc-night .foot-tag::after{content:"";position:absolute;inset-inline:22% 22%;bottom:0;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--gc-gold),transparent)}
.lp-footer.gc-night .foot-marks li{background:var(--gc-tile);border:1px solid var(--gc-tile-edge);border-radius:18px;
  box-shadow:var(--gc-inner);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);
  transform:translateY(22px);
  transition:transform .6s var(--gc-spring), border-color .3s, background .3s}
.lp-footer.gc-night.gc-in .foot-marks li{transform:none}
.lp-footer.gc-night.gc-in .foot-marks li:nth-child(2){transition-delay:70ms}
.lp-footer.gc-night.gc-in .foot-marks li:nth-child(3){transition-delay:140ms}
.lp-footer.gc-night.gc-in .foot-marks li:nth-child(4){transition-delay:210ms}
.lp-footer.gc-night.gc-in .foot-marks li:nth-child(5){transition-delay:280ms}
.lp-footer.gc-night.gc-in .foot-marks li:hover{transform:translateY(-6px);transition-delay:0ms;
  border-color:rgba(245,183,46,.46);background:rgba(255,255,255,.1)}
.lp-footer.gc-night .foot-marks .ic{position:relative;border-radius:50%;color:var(--gc-gold-ink);
  background:radial-gradient(circle at 32% 26%, var(--gc-gold-2), var(--gc-gold) 58%, #c98a12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 8px 18px -8px var(--gc-gold-glow)}
.lp-footer.gc-night .foot-marks .ic::after{content:"";position:absolute;inset:-4px;border-radius:50%;
  border:2px solid var(--gc-gold);opacity:0;pointer-events:none;animation:gc-pulse 6s ease-out infinite}
.lp-footer.gc-night .foot-marks li:nth-child(2) .ic::after{animation-delay:.6s}
.lp-footer.gc-night .foot-marks li:nth-child(3) .ic::after{animation-delay:1.2s}
.lp-footer.gc-night .foot-marks li:nth-child(4) .ic::after{animation-delay:1.8s}
.lp-footer.gc-night .foot-marks li:nth-child(5) .ic::after{animation-delay:2.4s}

@keyframes gc-up{from{transform:translateY(24px)}}
@keyframes gc-rule{from{transform:scaleX(0)}}
@keyframes gc-floaty{0%,100%{translate:0 0}50%{translate:0 -5px}}
@keyframes gc-pulse{0%{opacity:.85;scale:.9}22%,100%{opacity:0;scale:1.55}}
@keyframes gc-pan-x{from{translate:-3% 0}to{translate:3% 0}}
@media (max-width:640px){
  /* شاشةٌ ضيّقة: المشهدُ أعرض من الرأس فيظهر شطرُه الأوّل، والتعتيمُ يغطّي العرض كلَّه ليبقى النصُّ مقروءًا */
  .gc-hero-plate img{-webkit-mask-image:none;mask-image:none}
  .gc-hero-plate::after{background:
    linear-gradient(to left, rgba(4,13,25,.9) 0%, rgba(4,13,25,.74) 50%, rgba(4,13,25,.5) 100%),
    linear-gradient(to top, rgba(4,13,25,.8), transparent 50%)}
}
@media (prefers-reduced-motion:reduce){
  .gc-hero-plate img,.lp-footer.gc-night .sky img,.feat-strip.gc-glass .it,.feat-strip.gc-glass .ic,
  .page-hero.gc-night .page-hero-in > div > *,.page-hero.gc-night h1::after{animation:none;transition:none;transform:none}
  .feat-strip.gc-glass .ic::after,.lp-footer.gc-night .foot-marks .ic::after{animation:none}
  .lp-footer.gc-night .foot-marks li{transform:none;transition:none}
}

/* ======================================================== البحث ======== */
.search-bg{position:fixed;inset:0;z-index:120;background:rgba(6,24,43,.55);
  backdrop-filter:blur(4px);display:grid;place-items:start center;padding:12vh 16px 16px}
.search-box{width:min(620px,100%);background:#fff;border-radius:var(--r-lg);box-shadow:var(--sh-2);
  overflow:hidden}
.search-box .top{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
.search-box input{flex:1;border:0;font:inherit;font-size:16px;color:var(--text-dark);background:none;outline:none}
.search-box .top svg{width:20px;height:20px;color:var(--muted);flex:none}
.search-res{max-height:min(52vh,420px);overflow:auto;padding:6px}
.search-res a{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:10px}
.search-res a:hover,.search-res a.on{background:var(--surface)}
.search-res .dot{width:30px;height:30px;border-radius:9px;flex:none}
.search-res b{font-size:14px;color:var(--text-dark);display:block}
.search-res span{font-size:11.5px;color:var(--muted)}
.search-res .none{padding:22px;text-align:center;color:var(--muted);font-size:13.5px}
.search-box .hint{padding:9px 16px;border-top:1px solid var(--line);font-size:11.5px;color:var(--muted)}

/* ======================================================== الإشعارات ==== */
.lp-toast{position:fixed;inset-inline:0;bottom:22px;margin-inline:auto;width:max-content;
  max-width:calc(100% - 32px);background:var(--navy-900);color:#fff;padding:11px 20px;
  border-radius:var(--r-pill);box-shadow:var(--sh-2);font-size:13.5px;font-weight:700;z-index:150;
  animation:tin .28s cubic-bezier(.2,.9,.3,1)}
@keyframes tin{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ==================================================== ظهور تدريجي ====== */
.reveal{opacity:0;transform:translateY(16px)}
.reveal.in{opacity:1;transform:none;transition:opacity .55s ease, transform .55s cubic-bezier(.2,.8,.3,1)}
@media (prefers-reduced-motion:reduce){
  .reveal,.reveal.in{opacity:1;transform:none;transition:none}
  .subj-card,.btn-gold,.btn-login,.step .ic{transition:none}
  .grade-card.premium,.grade-card.premium .art,.grade-card.premium .go,
  .feat-strip .it,.grade-cta .b,.page-hero .stage-figure .ring{transition:none;animation:none}
}

/* ===================================================== الاستجابة ======= */
@media (max-width:1180px){
  .stage-grid{grid-template-columns:1fr}
  .stage-card{min-height:150px}
  .subjects-body{grid-template-columns:1fr}
  .rail{grid-template-columns:1fr 1fr;display:grid}
  .lower{grid-template-columns:1fr 1fr}
  .journey{grid-column:1 / -1}
  .subj-card{flex:1 1 calc(33.333% - 13px)}
  .feat-strip{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .stages{margin-top:0;padding-top:clamp(14px,3vw,22px)}
  .sec-head h2{color:var(--text-dark);text-shadow:none}
  .sec-head p{color:var(--muted);text-shadow:none}
  .page-hero-in .glyph{display:none}
  /* الرسم الكبير والزخارف الجانبية تُخفى على الجوّال: النصّ أولى بالمساحة */
  .page-hero .stage-figure{display:none}
  .page-hero .decor-chart,.page-hero .decor-orb{display:none}
  .page-hero.cine{padding-block:calc(60px + 16px) clamp(22px,5vw,34px)}
  .grade-card.premium{min-height:150px}
  .grade-card.premium .art{width:clamp(84px,20vw,120px);opacity:.2}
  .grade-cta{flex-direction:column;align-items:flex-start}
  .grade-cta .b{width:100%;justify-content:center}
  .cta-row .cta-card .in{width:auto;margin-inline:clamp(12px,3vw,20px)}
  .cta-row .cta-card{min-height:clamp(170px,38vw,210px)}
  /* الجوّال: عنصر القائمة ينتقل مباشرةً بدل الانسدال */
  .drop-menu{display:none}
  .nav-drop .caret{display:none}
  .lp-header{grid-template-columns:minmax(0,auto) 1fr;height:60px}
  .lp-brand{min-width:0}
  .lp-brand .tx{min-width:0;overflow:hidden}
  .lp-brand .tx b,.lp-brand .tx span{overflow:hidden;text-overflow:ellipsis}
  .lp-nav,html[dir="ltr"] .lp-nav{position:fixed;inset-block:0;right:0;left:auto;
    width:min(300px,84vw);
    background:rgba(8,28,50,.985);backdrop-filter:blur(14px);flex-direction:column;
    justify-content:flex-start;align-items:stretch;gap:2px;padding:78px 14px 20px;
    /* مغلق: شفاف ومُزاح إزاحة صغيرة داخل العرض — لا يخرج خارج الصفحة فيولّد
       تمريرًا أفقيًا، وهو ما يحدث لو أزحناه بعرضه كاملًا. */
    opacity:0;visibility:hidden;transform:translateX(22px);
    transition:opacity .24s ease, transform .28s cubic-bezier(.2,.8,.3,1), visibility .28s;
    z-index:70}
  .lp-nav.open,html[dir="ltr"] .lp-nav.open{opacity:1;visibility:visible;transform:none}
  .lp-nav a{padding:13px 14px;border-radius:10px;font-size:15px;text-align:right}
  .lp-nav a:hover{background:rgba(255,255,255,.1)}
  .lp-nav a[aria-current="page"]::after{inset-inline:auto 14px;width:22px;bottom:9px}
  .nav-toggle{display:grid;place-items:center}
  .lang span.lbl{display:none}
  .hero{aspect-ratio:auto;min-height:0;height:auto;padding-block:88px clamp(28px,7vw,54px);
    background-position:60% center}
  .hero-copy{max-width:100%}
  .hero .lead{max-width:100%}
  .hero::after{background:linear-gradient(to top, rgba(6,24,43,.94) 22%, rgba(6,24,43,.62) 62%, rgba(6,24,43,.35))}
  .subjects{margin-top:0;padding-top:clamp(14px,3vw,22px)}
  .subjects-head{height:auto;padding-top:4px}
  .subjects-head .tt{color:var(--text-dark);text-shadow:none}
  .subjects-head p{color:var(--muted)}
  .carousel-ctl button{background:#fff;border:1px solid var(--line)}
  .rail{grid-template-columns:1fr}
  .lower{grid-template-columns:1fr}
  /* ترتيب الجوّال: البطاقات ← السؤال ← الرحلة ← التقدّم ← الدعوة */
  .subjects-body{display:flex;flex-direction:column}
  .subj-grid{order:1}
  .rail{order:2}
  .lower .journey{order:1}
  .lower .progress{order:2}
  .lower .cta-card{order:3}
  .steps{flex-wrap:wrap;gap:14px;justify-content:center}
  .step{flex:0 0 calc(33.333% - 12px)}
  .step-arrow{display:none}
}
@media (max-width:640px){
  /* min-width:0 ضروري: بدونه يتمدّد الشريط بعرض محتواه بدل أن يمرَّر داخل نفسه */
  .subj-grid{display:flex;flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory;
    gap:11px;padding-bottom:10px;scrollbar-width:thin;min-width:0;width:100%}
  .subj-card{flex:0 0 78%;scroll-snap-align:center;min-width:0}
  .subj-card.stack{flex:1 1 auto}
  .hero-cta{flex-direction:column;align-items:stretch}
  .hero-cta a{justify-content:center}
  .hero-feats{gap:12px 18px}
  .step{flex:0 0 calc(50% - 12px)}
  .progress-body{grid-template-columns:1fr;justify-items:center}
  .prog-list{width:100%}
  .foot-brand{flex-direction:column;gap:10px}
  .foot-marks{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
  .foot-legal-in{flex-direction:column;justify-content:center;text-align:center;
    padding-inline:var(--pad);
    padding-block:clamp(12px,2vw,18px) calc(var(--foot-safe) + 12px)}
  .foot-copy{text-align:center}
  .foot-legal{justify-content:center}
  .lp-footer .sky{opacity:.2;height:min(46%,150px)}
  .feat-strip{grid-template-columns:1fr;gap:9px}
  .grade-grid.premium{grid-template-columns:1fr}
}
/* شاشات الهواتف الضيّقة: نضغط شريط الإجراءات حتى لا يتجاوز العرض */
@media (max-width:560px){
  /* عمودٌ واحدٌ للشارات: كلُّ شارةٍ سطرٌ مقروءٌ بلا ضغطٍ ولا فيضٍ أفقيّ */
  .foot-marks{grid-template-columns:1fr}
  .foot-tag{font-size:clamp(14px,4vw,18px)}
  .foot-legal{gap:6px 13px}
  .foot-legal li + li::before{margin-inline-end:13px}
  .lp-header{gap:8px;padding-inline:12px}
  .lp-brand .tx span{display:none}
  .lp-brand{gap:8px}
  .lp-actions{gap:4px}
  .btn-login{padding:6px 11px;font-size:12px;gap:6px}
  .lang{padding:4px 6px}
  .icon-round{width:30px}
}
@media (max-width:400px){
  .step{flex:0 0 100%}
  .quiz .opts{grid-template-columns:1fr}
  .lp-brand .tx b{font-size:13px}
  .btn-login{padding:6px 9px;font-size:11.5px}
}

/* ---------------------------------------------------------------------------
   مادة معروضة للتعريف ولم يُبنَ محتواها بعد.
   تبقى مرئية (لا نحذف مادة) لكنها لا تُقدَّم بوصفها جاهزة: لهجة أهدأ،
   ووسم صريح «قيد الإعداد». الفرق مرئي وقابل للقراءة الآلية معًا
   (data-ready="0")، فلا يظنّها الطالب مادة نُسِي إسنادها.
   --------------------------------------------------------------------------- */
.subj-card.not-ready{ opacity:.62; filter:saturate(.55) }
.subj-card.not-ready:hover,
.subj-card.not-ready:focus-visible{ opacity:.82; filter:saturate(.75) }
.subj-card.not-ready .go{ opacity:.45 }

.subj-card .prep-pill{
  /* الزاوية المقابلة للعنوان: العنوان في بداية السطر، فالوسم في نهايته
     حتى لا يغطّي اسم المادة في أي اتجاه (RTL أو LTR). */
  position:absolute; inset-block-start:12px; inset-inline-end:12px; z-index:3;
  display:inline-block; padding:4px 11px; border-radius:999px;
  background:rgba(11,26,44,.78); color:#fff;
  font-size:11.5px; font-weight:800; letter-spacing:.2px;
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  box-shadow:0 2px 8px rgba(0,0,0,.28);
}
@media (max-width:520px){ .subj-card .prep-pill{ font-size:10.5px; padding:3px 9px } }

/* بطاقات الأول الإعدادي: نفس المكوّن، ورسوم معتمدة محلية ونصوص مستقلة. */
.subj-card.prep-card{min-height:172px;opacity:1;filter:none;text-align:start}
.subj-card.prep-card:hover,.subj-card.prep-card:focus-visible{opacity:1;filter:none}
.prep-card .prep-art{background-size:500% 200%;background-repeat:no-repeat;width:48%}
.prep-card .txt{display:block;box-sizing:border-box;margin-inline-start:0;margin-inline-end:auto;width:64%;max-width:64%;padding:26px 14px 12px}
.prep-card h3{font-size:clamp(15px,1.2vw,20px);line-height:1.45;overflow-wrap:break-word}
.subj-card.prep-card .go{opacity:1}
.prep-card .prep-pill{font-size:10px;padding:3px 8px;inset-block-start:8px;inset-inline-end:8px}
html[dir="ltr"] .prep-card .art{left:auto;right:0;transform:scaleX(-1)}
html[dir="ltr"] .prep-card:hover .art{transform:scaleX(-1) scale(1.05)}
html[dir="ltr"] .prep-card .go{left:auto;right:12px}
html[dir="ltr"] .prep-card::after{background:linear-gradient(to right,rgba(0,0,0,.34),rgba(0,0,0,.1) 42%,transparent 66%)}
@media(max-width:520px){.subj-card.prep-card{min-height:175px}}

/* ===========================================================================
   النظام البصريّ الواحد (٢٠٢٦-١٠-٠٩) — طبقةٌ أخيرة فوق كلّ ما سبق في هذا الملفّ.
   ملاحظة المالك على صفحة المرحلة: «في مناطق مظلمة ومناطق فاتحة». السبب أنّ الصفحات العامّة لم يكن لها مظهرٌ أصلًا:
   الداكن والفاتح كانا يُختاران لكلّ عنصرٍ بألوانٍ ثابتة. القاعدة الآن:
   · النهاريّ: كلُّ الأشرطة والسطوح فاتحة (لوحة ← بطاقات بيضاء ← تذييل فاتح)، ولا يبقى داكنًا إلا الصورُ وبطاقاتُها.
   · الليليّ: كلُّها كحليّةٌ فيها زرقة (لا سواد)، بالقيم نفسها التي في لوحة الطالب (assets/shell-motion.css).
   المظهرُ من html[data-theme] (assets/theme.js، المفتاح tw-theme نفسه)، وغيابُه = مظهرُ النظام.
   الرموز --c-* هي المرجع؛ رموزُ هذا الملفّ القديمة (--surface · --text-dark · --muted · --line · --gc-*) تُعاد إليها ليلًا.
   =========================================================================== */
:root{
  --c-canvas:#e9eff7;--c-canvas-2:#f5f8fc;--c-surface:#fff;--c-surface-grad:linear-gradient(180deg,#fff,#f4f8fc);
  --c-edge:rgba(16,33,58,.1);--c-ink:#10213a;--c-ink-2:#44566f;--c-ink-3:#5a6b82;
  --c-accent:#f5b72e;--c-accent-2:#ffd874;--c-accent-ink:#06182b;--c-accent-text:#8a6100;--c-focus:#0b5fd0;
  --c-sh-1:0 1px 2px rgba(6,24,43,.06),0 8px 22px -14px rgba(6,24,43,.28);
  --c-sh-2:0 2px 6px rgba(6,24,43,.08),0 22px 44px -22px rgba(6,24,43,.4);
  --c-inner:inset 0 1px 0 #fff;
  --c-tint-a:rgba(22,135,255,.07);--c-tint-b:rgba(122,53,213,.06);
  --c-hero:#0b1f3d;--c-hero-rgb:11,31,61;
  --c-foot-a:rgba(245,248,252,.96);--c-foot-b:rgba(245,248,252,.82);--c-foot-c:rgba(245,248,252,.5);
  --c-out:cubic-bezier(.16,1,.3,1);
  /* التسميةُ الرماديّة القديمة (#6f7e93) تباينُها ٣٫٦–٤٫١ على سطوح النهار: دون الحدّ للنصّ الصغير */
  --muted:#5a6b82;
}
html[data-theme="dark"]{
  --c-canvas:#0b1f3d;--c-canvas-2:#102848;--c-surface:#162f55;--c-surface-grad:linear-gradient(180deg,#1d3d6b,#162f55);
  --c-edge:rgba(255,255,255,.18);--c-ink:#f1f6fc;--c-ink-2:#cbd9ea;--c-ink-3:#aabdd4;
  --c-accent-text:#f5b72e;--c-focus:#ffd874;
  --c-sh-1:0 18px 40px -22px rgba(0,0,0,.8);--c-sh-2:0 30px 54px -24px rgba(0,0,0,.85);
  --c-inner:inset 0 1px 0 rgba(255,255,255,.14);
  --c-tint-a:rgba(77,142,230,.2);--c-tint-b:rgba(245,183,46,.07);
  --c-foot-a:rgba(11,31,61,.9);--c-foot-b:rgba(11,31,61,.5);--c-foot-c:rgba(11,31,61,.12);
  --surface:#102848;--surface-2:#162f55;--text-dark:#f1f6fc;--muted:#aabdd4;--line:rgba(255,255,255,.16);
  --sh-1:var(--c-sh-1);--sh-2:var(--c-sh-2);
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){html:not([data-theme="light"]){
  --c-canvas:#0b1f3d;--c-canvas-2:#102848;--c-surface:#162f55;--c-surface-grad:linear-gradient(180deg,#1d3d6b,#162f55);
  --c-edge:rgba(255,255,255,.18);--c-ink:#f1f6fc;--c-ink-2:#cbd9ea;--c-ink-3:#aabdd4;
  --c-accent-text:#f5b72e;--c-focus:#ffd874;
  --c-sh-1:0 18px 40px -22px rgba(0,0,0,.8);--c-sh-2:0 30px 54px -24px rgba(0,0,0,.85);
  --c-inner:inset 0 1px 0 rgba(255,255,255,.14);
  --c-tint-a:rgba(77,142,230,.2);--c-tint-b:rgba(245,183,46,.07);
  --c-foot-a:rgba(11,31,61,.9);--c-foot-b:rgba(11,31,61,.5);--c-foot-c:rgba(11,31,61,.12);
  --surface:#102848;--surface-2:#162f55;--text-dark:#f1f6fc;--muted:#aabdd4;--line:rgba(255,255,255,.16);
  --sh-1:var(--c-sh-1);--sh-2:var(--c-sh-2);
  color-scheme:dark;
}}

/* ١) اللوحة: لونٌ واحد خلف الصفحة كلِّها حتى ما تحت التذييل، والتذييلُ يلتصق بأسفل الشاشة في الصفحات القصيرة */
html{background:var(--c-canvas-2)}
body.lp{background:var(--c-canvas-2);color:var(--c-ink);min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
body.lp > main{flex:1 0 auto}
.inner-page{background:
  radial-gradient(58% 42% at 92% 0%,var(--c-tint-a),transparent 62%),
  radial-gradient(48% 38% at 4% 34%,var(--c-tint-b),transparent 64%)}
:focus-visible{outline-color:var(--c-focus)}

/* ٢) السطوحُ التي كانت بيضاء ثابتة تتبع المظهر */
.acct-menu,.drop-menu,.search-box,.back-link,.empty-state,.card-w,.feat-card,.feat-strip .it,.quiz .opts button,
#about .about-card,.grade-card:not(.premium){background:var(--c-surface-grad);border-color:var(--c-edge);color:var(--c-ink)}
.back-link{color:var(--c-ink);box-shadow:var(--c-sh-1),var(--c-inner)}
.back-link:hover{background:var(--c-surface);border-color:var(--c-accent)}
.grade-card .cnt,.grade-card .go,.empty-state .ic{color:var(--c-ink-2)}
.quiz .opts button{color:var(--c-ink-2)}
.feat-strip b,.feat-card b{color:var(--c-ink)}
.feat-strip span,.feat-card span{color:var(--c-ink-3)}
.sec-head.start h2{color:var(--c-ink)}
.sec-head.start p{color:var(--c-ink-3)}

/* ٣) رأسُ المرحلة: صورةٌ ليليّة تحت تعتيمٍ كحليٍّ فيه زرقة (كان ‎#040d19‏ قريبًا من السواد) */
.gc-night,.gc-night-body,.lp-footer.gc-night{--gc-bg0:var(--c-hero);
  --gc-card:var(--c-surface-grad);--gc-card-edge:var(--c-edge);--gc-card-drop:var(--c-sh-1);--gc-inner:var(--c-inner);
  --gc-out:var(--c-out)}
.gc-hero-plate::after{background:
  linear-gradient(to left,rgba(var(--c-hero-rgb),.9) 0%,rgba(var(--c-hero-rgb),.55) 44%,transparent 66%),
  linear-gradient(to top,rgba(var(--c-hero-rgb),.66),transparent 40%)}
@media (max-width:640px){.gc-hero-plate::after{background:
  linear-gradient(to left,rgba(var(--c-hero-rgb),.9) 0%,rgba(var(--c-hero-rgb),.74) 50%,rgba(var(--c-hero-rgb),.5) 100%),
  linear-gradient(to top,rgba(var(--c-hero-rgb),.8),transparent 50%)}}

/* ٤) بطاقاتُ المزايا: سطحُ المظهر لا كحليٌّ ثابت — بيضاء نهارًا، كحليّةٌ ليلًا، والقرصُ الذهبيّ كما هو */
.feat-strip.gc-glass b{color:var(--c-ink)}
.feat-strip.gc-glass .it > span:last-child > span{color:var(--c-ink-3)}
.feat-strip.gc-glass .it:hover{box-shadow:var(--c-sh-2),0 0 0 1px rgba(245,183,46,.3),var(--c-inner)}

/* ٥) دعوةُ المتابعة في صفحة الصفّ: سطحٌ مرفوع بحافّةٍ ذهبيّة بدل لوحٍ كحليّ */
.grade-cta{color:var(--c-ink);background:var(--c-surface-grad);border:1px solid var(--c-edge);
  border-inline-start:3px solid var(--c-accent);box-shadow:var(--c-sh-2),var(--c-inner)}
.grade-cta p{color:var(--c-ink-2)}

/* ٦) التذييل: جلدٌ واحد يتبع المظهر (فاتحٌ نهارًا، كحليٌّ ليلًا)، والأفقُ خلفه تحت تعتيم اللون نفسه */
.lp-footer,.lp-footer.gc-night{background:var(--c-canvas-2);color:var(--c-ink-2);margin-top:clamp(28px,4vw,64px)}
.lp-footer .sky{opacity:.16}
.lp-footer.gc-night .sky{opacity:1}
.lp-footer.gc-night .sky::after{background:linear-gradient(to bottom,var(--c-foot-a) 0%,var(--c-foot-b) 52%,var(--c-foot-c) 100%)}
.foot-tag{color:var(--c-ink)}
.foot-marks li,.lp-footer.gc-night .foot-marks li{background:var(--c-surface-grad);border:1px solid var(--c-edge);color:var(--c-ink);
  box-shadow:var(--c-sh-1),var(--c-inner);-webkit-backdrop-filter:none;backdrop-filter:none}
.foot-marks li:hover,.lp-footer.gc-night.gc-in .foot-marks li:hover{background:var(--c-surface);border-color:rgba(245,183,46,.6)}
.foot-marks .ic{color:var(--c-accent-ink);border-radius:50%;border:0;
  background:radial-gradient(circle at 32% 26%,var(--c-accent-2),var(--c-accent) 58%,#c98a12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 8px 18px -8px rgba(245,183,46,.55)}
.foot-legal-row{border-top-color:var(--c-edge);background:var(--c-foot-a)}
.foot-copy{color:var(--c-ink-3)}
.foot-legal a{color:var(--c-ink-2)}
.foot-legal a:hover{color:var(--c-ink);border-bottom-color:var(--c-accent)}
.foot-legal li + li::before{color:var(--c-ink-3)}

/* ٧) الحركة: دخولٌ قصير لا يُخفي المحتوى ولا يتتابع طويلًا (قياسُ اللوحة: الحركاتُ الطويلة هي «البطء» الذي لاحظه المالك) */
.reveal{opacity:1;transform:none}
.reveal.in{animation:c-in .26s var(--c-out) both;transition:none}
@keyframes c-in{from{opacity:.4;transform:translateY(12px)}}
.feat-strip.gc-glass .it{animation-duration:.3s;animation-delay:calc(var(--gc-i,0) * 30ms);animation-timing-function:var(--c-out);
  transition:transform .24s var(--c-out),box-shadow .2s,border-color .2s}
.page-hero.gc-night .page-hero-in > div > *{animation-duration:.3s;animation-timing-function:var(--c-out)}
.page-hero.gc-night .page-hero-in > div > :nth-child(2){animation-delay:30ms}
.page-hero.gc-night .page-hero-in > div > :nth-child(3){animation-delay:60ms}
.page-hero.gc-night .page-hero-in > div > :nth-child(4){animation-delay:90ms}
.page-hero.gc-night .page-hero-in > div > :nth-child(5){animation-delay:120ms}
.page-hero.gc-night h1::after{animation-duration:.4s;animation-delay:.1s}
.lp-footer.gc-night .foot-marks li{transition:transform .26s var(--c-out),border-color .2s,background .2s}
.lp-footer.gc-night.gc-in .foot-marks li:nth-child(2){transition-delay:25ms}
.lp-footer.gc-night.gc-in .foot-marks li:nth-child(3){transition-delay:50ms}
.lp-footer.gc-night.gc-in .foot-marks li:nth-child(4){transition-delay:75ms}
.lp-footer.gc-night.gc-in .foot-marks li:nth-child(5){transition-delay:100ms}
.lp-header{transition:background .18s,box-shadow .18s}
@media (prefers-reduced-motion:reduce){.reveal.in,.feat-strip.gc-glass .it{animation:none}}

/* ٨) نصوصٌ كانت بألوانٍ ثابتة لا تتبع المظهر */
.quiz .q,.prog-list li,.info .lede,#about .lede{color:var(--c-ink-2)}
.step-arrow{color:var(--c-ink-3)}
.quiz .opts button.ok{background:rgba(22,184,120,.16);color:var(--c-ink)}
.quiz .opts button.no{background:rgba(233,90,90,.16);color:var(--c-ink)}

/* ٩) ما بقي كحليًّا ثابتًا في النهار: الترويسة الملتصقة، لوحُ «تواصل معنا»، ولوحُ النصّ فوق صورة الدعوة */
:root{--c-head:rgba(255,255,255,.82);--c-head-sh:0 10px 30px -18px rgba(16,33,58,.4);--c-hover:rgba(16,33,58,.07);
  --c-plate:rgba(255,255,255,.88);--c-ts:none;--c-ok:#0d7a4f;--c-err:#a63333;--c-wa:#128a44;--c-tg:#0f6f9c}
html[data-theme="dark"]{--c-head:rgba(16,38,72,.86);--c-head-sh:0 10px 30px -18px rgba(0,0,0,.8);--c-hover:rgba(255,255,255,.1);
  --c-plate:rgba(11,31,61,.6);--c-ts:0 2px 10px rgba(0,0,0,.55);--c-ok:#5be08a;--c-err:#ff9b9b;--c-wa:#3ee07d;--c-tg:#5cc4f0}
@media (prefers-color-scheme:dark){html:not([data-theme="light"]){--c-head:rgba(16,38,72,.86);--c-head-sh:0 10px 30px -18px rgba(0,0,0,.8);
  --c-hover:rgba(255,255,255,.1);--c-plate:rgba(11,31,61,.6);--c-ts:0 2px 10px rgba(0,0,0,.55);--c-ok:#5be08a;--c-err:#ff9b9b;--c-wa:#3ee07d;--c-tg:#5cc4f0}}

/* الترويسة: فوق صورة الرأس شفّافةٌ بنصٍّ أبيض كما كانت؛ ملتصقةً تصير زجاجَ المظهر بحبره */
.lp-header.stuck{background:var(--c-head);box-shadow:var(--c-head-sh);border-bottom:1px solid var(--c-edge)}
.lp-header.stuck .lp-brand .tx b{color:var(--c-ink)}
.lp-header.stuck .lp-brand .tx span{color:var(--c-ink-3)}
.lp-header.stuck .lp-nav a{color:var(--c-ink-2)}
.lp-header.stuck .lp-nav a:hover,.lp-header.stuck .lp-nav a[aria-current="page"]{color:var(--c-ink)}
.lp-header.stuck .icon-round,.lp-header.stuck .lang{color:var(--c-ink-2)}
.lp-header.stuck .icon-round:hover,.lp-header.stuck .lang:hover{background:var(--c-hover);color:var(--c-ink)}
.lp-header.stuck .acct-btn{background:var(--c-canvas-2);border-color:var(--c-edge);color:var(--c-ink)}
.lp-header.stuck .btn-login{background:linear-gradient(180deg,var(--c-accent-2),var(--c-accent));color:var(--c-accent-ink);
  box-shadow:0 8px 20px -12px rgba(217,154,18,.9)}
.acct-menu a,.acct-menu button{color:var(--c-ink-2)}
.drop-menu a{color:var(--c-ink)}
@media (max-width:900px){
  .lp-nav,html[dir="ltr"] .lp-nav{background:var(--c-surface);box-shadow:var(--c-sh-2);-webkit-backdrop-filter:none;backdrop-filter:none}
  .lp-nav a,.lp-header.stuck .lp-nav a{color:var(--c-ink)}
  .lp-nav a:hover{background:var(--c-hover)}
}

/* «تواصل معنا»: سطحٌ مرفوع بحافّةٍ ذهبيّة */
.contact-box{background:var(--c-surface-grad);border:1px solid var(--c-edge);border-inline-start:3px solid var(--c-accent);
  color:var(--c-ink);box-shadow:var(--c-sh-2),var(--c-inner)}
.contact-box h2,.c-form h3,.c-txt b,.contact-list a{color:var(--c-ink)}
.contact-box p,.c-hint{color:var(--c-ink-2)}
.c-txt em{color:var(--c-ink-3)}
.contact-list{background:var(--c-canvas-2);border-color:var(--c-edge)}
.contact-list li{background:transparent;color:var(--c-ink-2)}
.contact-list li + li{box-shadow:inset 0 1px 0 var(--c-edge)}
.c-ic{background:rgba(245,183,46,.16);color:var(--c-accent-text)}
.c-ic.wa{color:var(--c-wa)} .c-ic.tg{color:var(--c-tg)}
.c-btn{border-color:var(--c-edge);color:var(--c-ink);background:var(--c-canvas-2)}
.c-btn:hover{background:var(--c-hover);border-color:var(--c-accent)}
.c-form{border-top-color:var(--c-edge)}
.c-in{color:var(--c-ink);background:var(--c-canvas-2);border-color:var(--c-edge)}
.c-in::placeholder{color:var(--c-ink-3)}
.c-in:focus{background:var(--c-surface)}
.c-msg.ok{color:var(--c-ok)} .c-msg.err{color:var(--c-err)}

/* صورةُ الدعوة تبقى، ولوحُ النصّ فوقها زجاجُ المظهر لا كحليٌّ ثابت */
.cta-card .in{background:var(--c-plate);border-color:var(--c-edge);box-shadow:var(--c-sh-2)}
.cta-card h2{color:var(--c-ink);text-shadow:var(--c-ts)}
.cta-card p{color:var(--c-ink-2)}

/* ١٠) انتقالٌ فوريّ بين المرحلة والصفّ حيث يدعمه المتصفّح (تقدّميّ: بلا دعمٍ يبقى التنقّل العاديّ) */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.18s;animation-timing-function:var(--c-out)}
@media (prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none}}

/* ١١) من المراجعة المستقلّة: عناصرُ كانت تختلف بين صفحةٍ وأخرى */
.btn-login{background:linear-gradient(180deg,var(--c-accent-2),var(--c-accent));color:var(--c-accent-ink)}
.sec-head.start h2{position:relative;display:inline-block;padding-bottom:.28em}
.sec-head.start h2::after{content:"";position:absolute;inset-inline-start:0;bottom:0;width:100%;height:3px;border-radius:3px;
  background:linear-gradient(90deg,var(--c-accent),var(--c-accent-2))}
.feat-strip .it{border-radius:22px;align-items:center}
.feat-strip .ic{border-radius:50%;margin-top:0;color:var(--c-accent-ink);
  background:radial-gradient(circle at 32% 26%,var(--c-accent-2),var(--c-accent) 58%,#c98a12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 10px 22px -10px rgba(245,183,46,.55)}
.contact-box::before{display:none}

/* ١٢) الجولة الخامسة */
/* شبكةُ الموادّ: الصفُّ الأخير الناقص يتوسّط بدل أن يترك فراغًا في طرفه، والبطاقاتُ كلُّها بعرضٍ واحد */
.subj-grid{display:flex;flex-wrap:wrap;justify-content:center}
.subj-grid > .subj-card{flex:0 1 calc((100% - 3 * clamp(9px,.85vw,15px)) / 4);min-width:min(100%,250px)}
@media (max-width:1180px){.subj-grid > .subj-card{flex-basis:calc((100% - 2 * clamp(9px,.85vw,15px)) / 3)}}
@media (max-width:860px){.subj-grid > .subj-card{flex-basis:calc((100% - clamp(9px,.85vw,15px)) / 2)}}
@media (max-width:560px){.subj-grid > .subj-card{flex-basis:100%}}
/* زرُّ الإجراء في البطاقات: شكلٌ واحد مع لوحة الطالب — قرصٌ ذهبيّ بحبرٍ كحليّ بدل دائرةٍ بيضاء */
.grade-card.premium .go,.stage-card .go,.subj-card .go{color:var(--c-accent-ink);
  background:linear-gradient(180deg,var(--c-accent-2),var(--c-accent));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 8px 18px -8px rgba(245,183,46,.7)}
/* شارةُ «قيد الإعداد» وبطاقةٌ لم تُفتح بعد: كحليٌّ فيه زرقة بحافّةٍ مضيئة، لا أسودُ ولا رماديٌّ مطفأ */
.subj-card .prep-pill{background:rgba(var(--c-hero-rgb),.84);color:#fff;border:1px solid rgba(255,255,255,.34)}
/* رأسُ الصفّ المصوَّر بلا شكلٍ جانبيّ: النصُّ يأخذ عرضه */
.page-hero.gc-night .page-hero-in.cine{grid-template-columns:minmax(0,1fr)}

/* ١٣) من مشي غرفة التحكّم */
/* زرُّ العودة في الطرف المقابل لمرسى الروبوت، فلا يقف فوق نصّه */
.page-foot{display:flex;justify-content:flex-end}

/* ١٤) تلميعٌ أخير */
/* لوحُ «ابدأ من حيث أنت»: الصورةُ مرسومٌ موضوعُها يمينًا، ولوحُ النصّ في RTL يمينٌ أيضًا فكان يغطّيه ويبقى الفراغُ وحده ظاهرًا.
   تُقلب البطاقةُ أفقيًّا في RTL (فيصير الموضوعُ يسارًا) ويُعاد لوحُ النصّ إلى استقامته في اليمين. */
html[dir="rtl"] .cta-card{transform:scaleX(-1)}
html[dir="rtl"] .cta-card .in{transform:scaleX(-1);margin-inline:auto clamp(16px,2vw,40px)}
html[dir="rtl"] .cta-card::after{background:linear-gradient(to right,
  rgba(var(--c-hero-rgb),.86) 0%,rgba(var(--c-hero-rgb),.6) 26%,rgba(var(--c-hero-rgb),.24) 52%,transparent 76%)}
.cta-card::before{background:linear-gradient(to top,rgba(var(--c-hero-rgb),.6),rgba(var(--c-hero-rgb),.2) 62%,rgba(var(--c-hero-rgb),.06))}
@media (max-width:900px){html[dir="rtl"] .cta-card .in{margin-inline:clamp(12px,3vw,20px)}}
/* «مميّزات المنصّة»: الصفُّ الأخير الناقص يتوسّط */
.info-grid{display:flex;flex-wrap:wrap;justify-content:center}
.info-grid > *{flex:0 1 calc((100% - 3 * clamp(10px,1vw,16px)) / 4);min-width:min(100%,260px)}
@media (max-width:1180px){.info-grid > *{flex-basis:calc((100% - 2 * clamp(10px,1vw,16px)) / 3)}}
@media (max-width:860px){.info-grid > *{flex-basis:calc((100% - clamp(10px,1vw,16px)) / 2)}}
@media (max-width:560px){.info-grid > *{flex-basis:100%}}
/* الليل: حدٌّ أدنى لإضاءة لوحات البطاقات وحافّةٌ مضيئة، فلا تذوب بطاقةٌ داكنةُ الصورة في الخلفيّة */
html[data-theme="dark"] :is(.stage-card,.grade-card.premium) .gc-plate img{filter:brightness(1.2) saturate(1.06)}
html[data-theme="dark"] .stage-card.gc-live:not(:hover){box-shadow:0 0 0 1px rgba(170,208,255,.4),0 26px 50px -22px rgba(4,13,25,.85),0 0 46px -16px rgba(96,156,240,.55)}
@media (prefers-color-scheme:dark){
  html:not([data-theme="light"]) :is(.stage-card,.grade-card.premium) .gc-plate img{filter:brightness(1.2) saturate(1.06)}
  html:not([data-theme="light"]) .stage-card.gc-live:not(:hover){box-shadow:0 0 0 1px rgba(170,208,255,.4),0 26px 50px -22px rgba(4,13,25,.85),0 0 46px -16px rgba(96,156,240,.55)}
}

/* ١٥) جولة ١٠-١١ */
/* عبقرينو في الصفحات العامّة يطلّ من الحافّة ولا يقف فوق عناوين البطاقات؛ يخرج كاملًا عند الوقوف عليه أو التركيز أو حين تُفتح لوحتُه.
   الحجمُ نفسُه (قرار المالك ١٠-٠٧) — الموضعُ وحده. */
body.lp #abqarino-root{transition:translate .22s var(--c-out)}
html[dir="rtl"] body.lp #abqarino-root:not(:hover):not(:focus-within):not(:has(.abq-panel:not([hidden]))){translate:62% 0}
html[dir="ltr"] body.lp #abqarino-root:not(:hover):not(:focus-within):not(:has(.abq-panel:not([hidden]))){translate:-62% 0}
@media (prefers-reduced-motion:reduce){body.lp #abqarino-root{transition:none}}
/* بطاقةُ الثانويّة ليلًا: لونُ ستارتها (‎#0b2542‏) يكاد يطابق لوحةَ الليل فتذوب؛ تأخذ درجةً أفتح من الأزرق نفسه */
html[data-theme="dark"] .stage-card[data-stage="secondary"]{--s1:#1d4f8f}
@media (prefers-color-scheme:dark){html:not([data-theme="light"]) .stage-card[data-stage="secondary"]{--s1:#1d4f8f}}

/* ١٦) جرد البطاقات ٢٠٢٦-١٠-١١: شريطُ مزايا الرأس في الواجهة الإنجليزيّة كان يخرج أوّلُه من يسار الشاشة (صفٌّ معكوس بلا التفاف) */
html[dir="ltr"] .hero-feats{flex-direction:row;justify-content:flex-start;flex-wrap:wrap}
/* نصُّ الرأس كان مثبَّتًا من اليمين إلى اليسار حتى في الإنجليزيّة: علاماتُ الترقيم في غير موضعها والعنوانُ يلتفّ ثلاثة أسطر فيدخل تحت الشريط العلويّ */
html[dir="ltr"] .hero-copy{direction:ltr;text-align:left;max-width:min(60ch,50vw)}
html[dir="ltr"] .hero h1{font-size:calc(var(--font-size-display)*.84)}
html[dir="ltr"] .lp-brand .tx{direction:ltr;text-align:left}
html[dir="ltr"] .sec-head:not(.start){text-align:start}
/* السهمُ «نحو البداية» مرسومٌ يسارًا للعربيّة؛ في الإنجليزيّة يُقلب ليشير إلى الأمام */
html[dir="ltr"] :is(.go,.step-arrow,.btn-gold,.cta-card .btn-gold)>svg{transform:scaleX(-1)}
html[dir="ltr"] .back-link>svg{transform:scaleX(-1)}
html[dir="ltr"] body.lp svg:has(>path[d="M19 12H5M11 6l-6 6 6 6"]){transform:scaleX(-1)}
/* شريطُ المزايا على سطرٍ واحد في الشاشات العريضة (كان يلتفّ فيركب عنوانَ القسم التالي)، وعنوانُ الرأس أصغر قليلًا */
@media(min-width:761px){html[dir="ltr"] .hero-feats{flex-wrap:nowrap}}
html[dir="ltr"] .hero h1{font-size:calc(var(--font-size-display)*.78)}
@media(max-width:760px){html[dir="ltr"] .lp-brand .tx b{white-space:normal;font-size:12px;line-height:1.15;text-overflow:clip}}
@media(max-width:760px){html[dir="ltr"] .hero-copy{max-width:100%}}