/* =====================================================================
   home.css — الصفحة الرئيسية العامّة، النسخة ٥ (سماء دمشق + الشعار)
   ---------------------------------------------------------------------
   الهويّة نفسها في mag.php والتطبيق: Cairo، كحليّ #4C53A4/#2F358F،
   ذهبيّ #F7A61B، حبرٌ #1B1E3A، وأرضيّة #ECEAF3.
   السماء تتبع طقس دمشق الآن (storage_private/weather.json، نسخة التطبيق).
   ===================================================================== */

:root{
  --ink:#1B1E3A; --ink-2:#5B5F7A; --ink-3:#8A8EA8; --line:#EFEBE2;
  --bg:#ECEAF3; --surface:#fff; --brand:#4C53A4; --brand-deep:#2F358F;
  --gold:#F7A61B; --gold-lit:#FFD27A; --chip-bg:#FFF3DE; --chip-fg:#B86E00;
  --teal:#1E7A6E; --teal-bg:#E6F4EF; --red:#E5484D;
  --shell:1200px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;font-family:'Cairo',system-ui,sans-serif;background:var(--bg);color:var(--ink);line-height:1.7}
img,svg{display:block;max-width:100%}
a{color:var(--brand)}a:hover{color:var(--brand-deep)}
button{font-family:inherit}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:8px}
.skip{position:absolute;inset-inline-start:12px;top:-60px;z-index:99;background:#fff;padding:10px 16px;border-radius:12px;font-weight:800}
.skip:focus{top:12px}
.shell{width:min(var(--shell),100% - 32px);margin-inline:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.pill{height:52px;padding:0 26px;border-radius:26px;display:inline-flex;align-items:center;justify-content:center;gap:10px;font-size:16px;font-weight:800;text-decoration:none;border:0;cursor:pointer;white-space:nowrap}
.pill--gold{background:var(--gold);color:var(--ink);box-shadow:0 12px 30px rgba(247,166,27,.42)}
.pill--gold:hover{color:var(--ink);filter:brightness(1.05)}
.pill--white{background:#fff;color:var(--brand-deep)}
.pill--ghost{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.32)}
.pill--ghost:hover{color:#fff;background:rgba(255,255,255,.22)}
.pill--ink{background:var(--ink);color:#fff}.pill--ink:hover{color:#fff}
.pill svg{width:18px;height:18px;flex:none}

/* ══════════════ الرأس ══════════════ */
.top{position:absolute;top:0;left:0;right:0;z-index:20;height:84px;display:flex;align-items:center;gap:26px;padding:0 max(16px,calc((100% - var(--shell))/2))}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:#fff}
.brand:hover{color:#fff}
.brand__logo{width:44px;height:44px;border-radius:14px;background:#fff;display:grid;place-items:center;flex:none}
.brand__logo img{width:34px;height:34px}
.brand b{font-size:18px;font-weight:900;line-height:1.2;white-space:nowrap}
.mn-short{display:none}
.brand small{display:block;font-size:12px;font-weight:800;color:var(--gold-lit)}
.nav{display:flex;gap:22px}
.nav a{font-size:15px;font-weight:700;color:rgba(255,255,255,.88);text-decoration:none;text-shadow:0 1px 8px rgba(10,12,40,.35)}
.nav a:hover{color:#fff}
.top__end{margin-inline-start:auto;display:flex;align-items:center;gap:10px}
.top .pill{height:44px;padding:0 20px;font-size:15px}
.magnav{white-space:nowrap;flex:none;position:relative;height:42px;padding:0 14px 0 16px;border-radius:21px;background:linear-gradient(135deg,var(--gold-lit),var(--gold));color:var(--ink);font-size:14px;font-weight:900;text-decoration:none;display:flex;align-items:center;gap:8px;box-shadow:0 6px 18px rgba(247,166,27,.45);animation:magwig 6s ease-in-out infinite;transform-origin:50% 60%}
.magnav:hover{color:var(--ink);box-shadow:0 10px 26px rgba(247,166,27,.6)}
.magnav svg{width:18px;height:18px}
.magnav__new{height:20px;padding:0 7px;border-radius:10px;background:var(--ink);color:var(--gold-lit);font-size:11px;display:flex;align-items:center}
.magnav__dot{position:absolute;top:-3px;left:-3px;width:12px;height:12px;border-radius:6px;background:var(--red);border:2px solid #fff;animation:ping 1.6s ease-out infinite}
@keyframes magwig{0%,86%,100%{transform:rotate(0)}88%{transform:rotate(-5deg) scale(1.06)}91%{transform:rotate(4deg) scale(1.06)}94%{transform:rotate(-2deg)}97%{transform:rotate(1deg)}}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(229,72,77,.6)}100%{box-shadow:0 0 0 10px rgba(229,72,77,0)}}
.menubtn{display:none;width:44px;height:44px;border-radius:14px;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.12);color:#fff;place-items:center;cursor:pointer}
.menubtn svg{width:20px;height:20px}
.drawer{position:fixed;inset:0;z-index:60;background:rgba(16,18,46,.55);display:none}
.drawer[data-open="1"]{display:block}
.drawer__panel{position:absolute;top:0;bottom:0;inset-inline-start:0;width:min(320px,86%);background:#fff;padding:22px 18px;display:flex;flex-direction:column;gap:4px;box-shadow:0 0 40px rgba(0,0,0,.3)}
.drawer__panel a{height:52px;display:flex;align-items:center;padding:0 14px;border-radius:14px;font-size:16px;font-weight:800;color:var(--ink);text-decoration:none}
.drawer__panel a:hover{background:#F4F2EC}
.drawer__close{align-self:flex-end;width:44px;height:44px;border-radius:14px;border:1px solid var(--line);background:#fff;cursor:pointer;font-size:20px}

/* ══════════════ السماء (منقولة من طبقة التطبيق Sky) ══════════════ */
.hero{position:relative;height:880px;min-height:640px;overflow:hidden;background:#1B1E3A;isolation:isolate}
.sky{position:absolute;inset:0;overflow:hidden}
.sky[data-mood="sun"]{background:linear-gradient(180deg,#2F7FD8 0%,#6AB2F0 55%,#B9E0FA 100%)}
.sky[data-mood="night"]{background:linear-gradient(180deg,#070C24 0%,#1B2356 60%,#3A3F80 100%)}
.sky[data-mood="rain"]{background:linear-gradient(180deg,#465466 0%,#6F7D90 60%,#9AA6B4 100%)}
.sky[data-mood="snow"]{background:linear-gradient(180deg,#8FA6BF 0%,#C4D2E0 60%,#EEF2F6 100%)}
.sky[data-mood="dust"]{background:linear-gradient(180deg,#9C7A4E 0%,#C9A574 60%,#E6CFA6 100%)}
.sky[data-mood="storm"]{background:linear-gradient(180deg,#1D2130 0%,#363C52 60%,#565D75 100%)}
.wx-layer{position:absolute;inset:0;pointer-events:none}
.wx-move{transition:transform .45s ease-out}
.wx-drop{position:absolute;top:-12%;width:1.6px;height:22px;border-radius:2px;background:linear-gradient(rgba(255,255,255,0),rgba(255,255,255,.75));animation:wxFall linear infinite}
@keyframes wxFall{from{top:-12%;transform:translateX(0) rotate(12deg)}to{top:108%;transform:translateX(-36px) rotate(12deg)}}
.wx-flake{position:absolute;top:-6%;border-radius:50%;background:#fff;opacity:.9;animation:wxSnow linear infinite}
@keyframes wxSnow{0%{top:-6%;transform:translateX(0)}25%{transform:translateX(10px)}50%{transform:translateX(-8px)}75%{transform:translateX(12px)}100%{top:104%;transform:translateX(0)}}
.wx-star{position:absolute;border-radius:50%;background:#fff;animation:wxTwinkle 3.2s ease-in-out infinite}
@keyframes wxTwinkle{0%,100%{opacity:.25}50%{opacity:1}}
.wx-meteor{position:absolute;top:10%;left:72%;width:90px;height:1.5px;background:linear-gradient(270deg,rgba(255,255,255,0),#fff);opacity:0;animation:wxMeteor 7s ease-in infinite}
@keyframes wxMeteor{0%,84%{opacity:0;transform:translate(0,0) rotate(-24deg)}86%{opacity:1}95%{opacity:0;transform:translate(-170px,76px) rotate(-24deg)}100%{opacity:0}}
.wx-sun{position:absolute;border-radius:50%;background:radial-gradient(circle,#FFF8DC 0%,#FFE08A 22%,rgba(255,204,96,.38) 46%,rgba(255,204,96,0) 70%);animation:wxPulse 6s ease-in-out infinite}
@keyframes wxPulse{0%,100%{transform:scale(1);opacity:.92}50%{transform:scale(1.08);opacity:1}}
.wx-rays{position:absolute;border-radius:50%;background:repeating-conic-gradient(rgba(255,244,210,.22) 0deg 5deg,rgba(255,244,210,0) 5deg 17deg);-webkit-mask:radial-gradient(circle,#000 18%,transparent 68%);mask:radial-gradient(circle,#000 18%,transparent 68%);animation:wxSpin 70s linear infinite}
@keyframes wxSpin{to{transform:rotate(360deg)}}
.wx-cloud{position:absolute;border-radius:50%;background:radial-gradient(ellipse at center,rgba(255,255,255,.6),rgba(255,255,255,0) 68%);filter:blur(5px);animation:wxDrift ease-in-out infinite alternate}
@keyframes wxDrift{from{transform:translateX(-30px)}to{transform:translateX(40px)}}
.wx-haze{background:linear-gradient(180deg,rgba(214,170,110,0),rgba(214,170,110,.6));animation:wxHaze 9s ease-in-out infinite alternate}
@keyframes wxHaze{from{opacity:.55}to{opacity:1}}
.wx-mote{position:absolute;border-radius:50%;background:rgba(255,232,196,.75);animation:wxBlow linear infinite}
@keyframes wxBlow{from{transform:translate(0,0)}to{transform:translate(-520px,24px)}}
.wx-flash{background:#fff;opacity:0;animation:wxFlash 6.5s linear infinite}
@keyframes wxFlash{0%,88%{opacity:0}89%{opacity:.7}90%{opacity:.08}92%{opacity:.5}94%,100%{opacity:0}}
.wx-bead{position:absolute;border-radius:50% 50% 50% 50%/55% 55% 45% 45%;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.9) 0 12%,rgba(255,255,255,.2) 32%,rgba(255,255,255,.05) 62%);box-shadow:0 1px 2px rgba(0,0,0,.2),inset 0 -1px 2px rgba(255,255,255,.35);transition:opacity .35s,transform .35s}
.wx-bead.gone{opacity:0;transform:scale(.3)}
.wx-slide{animation:wxSlide 9s ease-in infinite}
@keyframes wxSlide{0%,62%{transform:translateY(0)}100%{transform:translateY(64px);opacity:0}}

.hero__scrim{position:absolute;inset:0;pointer-events:none;background:linear-gradient(to left,rgba(16,18,46,.62),rgba(16,18,46,.2) 52%,rgba(16,18,46,.05) 75%)}
.hero__fade{position:absolute;left:0;right:0;bottom:0;height:140px;pointer-events:none;background:linear-gradient(180deg,rgba(236,234,243,0),var(--bg))}
.glow-follow{position:absolute;width:520px;height:520px;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(247,166,27,.2),rgba(247,166,27,0) 65%);left:-999px;top:-999px;transition:left .2s ease-out,top .2s ease-out}
.par{transition:transform .25s ease-out;will-change:transform}

/* الشعار والأيقونات الأربع */
.emblem{position:absolute;top:200px;left:max(40px,calc((100% - var(--shell))/2 + 50px));width:400px;height:400px;pointer-events:none}
.emblem__ring{position:absolute;inset:0;border-radius:50%;border:1.5px dashed rgba(255,255,255,.45)}
.emblem__ring2{position:absolute;inset:16%;border-radius:50%;border:1px solid rgba(247,166,27,.55)}
.emblem__glow{position:absolute;inset:18%;border-radius:50%;background:radial-gradient(circle,rgba(247,166,27,.45),rgba(247,166,27,0) 70%);animation:breathe 5s ease-in-out infinite}
.emblem__core{position:absolute;inset:29%;border-radius:50%;background:#2F358F;box-shadow:0 24px 60px rgba(0,0,0,.35),0 0 0 12px rgba(255,255,255,.14);display:grid;place-items:center}
.emblem__core img{width:74%;height:74%}
.emblem__orbit{position:absolute;inset:0;animation:orbit 36s linear infinite}
.emblem__orbit span{position:absolute;width:52px;height:52px;border-radius:16px;display:grid;place-items:center;box-shadow:0 10px 24px rgba(0,0,0,.25);animation:counter 36s linear infinite}
.emblem__orbit svg{width:26px;height:26px}
.emblem__orbit .o1{top:-26px;left:calc(50% - 26px);background:var(--gold);color:var(--ink)}
.emblem__orbit .o2{top:calc(50% - 26px);left:-26px;background:#fff;color:var(--brand)}
.emblem__orbit .o3{bottom:-26px;left:calc(50% - 26px);background:#fff;color:var(--brand)}
.emblem__orbit .o4{top:calc(50% - 26px);right:-26px;background:var(--gold);color:var(--ink)}
@keyframes orbit{to{transform:rotate(360deg)}}
@keyframes counter{to{transform:rotate(-360deg)}}
@keyframes breathe{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}

.hero__text{position:absolute;top:170px;right:max(16px,calc((100% - var(--shell))/2));width:min(600px,55%);color:#fff;text-shadow:0 2px 18px rgba(10,12,40,.45)}
.wxchip{display:inline-flex;align-items:center;gap:10px;height:38px;padding:0 14px;border-radius:19px;background:rgba(10,12,40,.32);border:1px solid rgba(255,255,255,.25);font-size:14px;font-weight:800;text-shadow:none}
.wxchip i{width:8px;height:8px;border-radius:4px;background:#34D399}
.hero__eyebrow{margin-top:18px;font-size:17px;font-weight:800;color:var(--gold-lit)}
.hero h1{margin:6px 0 0;font-size:60px;line-height:1.25;font-weight:900}
.hero h1 em{font-style:normal;color:var(--gold-lit)}
.hero__line{margin:14px 0 0;font-size:18px;line-height:1.9;font-weight:600}
.hero__acts{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap}
.hero__acts .pill{text-shadow:none}

/* الشريط السفلي على الهاتف */
.dock{display:none}

/* ══════════════ الأقسام ══════════════ */
.sec{padding:110px 0 0}
.frame{position:relative;border-radius:40px;background:#fff;box-shadow:0 40px 90px rgba(27,30,58,.16)}
.h2{margin:0;font-size:40px;line-height:1.3;font-weight:900}
.kicker{font-size:14px;font-weight:800;color:var(--chip-fg)}

/* البرامج */
.prog{display:flex;min-height:640px}
.prog__side{position:relative;width:45%;flex:none;overflow:hidden;border-radius:0 40px 40px 0;color:#fff;transition:background .4s}
.prog__side svg.blob{position:absolute;inset:0;width:100%;height:100%}
.prog__word{position:absolute;top:70px;right:-30px;font-size:170px;font-weight:900;line-height:1;white-space:nowrap;color:rgba(255,255,255,.95)}
.prog__book{position:absolute;bottom:130px;right:18%;width:260px}
.prog__count{position:absolute;bottom:34px;right:40px;height:28px;padding:0 12px;border-radius:14px;background:rgba(255,255,255,.2);font-size:13px;font-weight:800;display:flex;align-items:center}
.prog__main{flex:1;padding:56px 0 90px;display:flex;flex-direction:column}
.prog__head{padding:0 28px}
.prog__blurb{margin:8px 0 0;color:var(--ink-2);font-size:15px}
.prog__cols{display:flex;padding:22px 28px 8px;font-size:12px;font-weight:800;color:var(--ink-3);gap:16px}
.prog__list{list-style:none;margin:0;padding:0}
.prog__list li{height:64px;display:flex;align-items:center;gap:16px;padding:0 28px;border-top:1px solid #F1EFE9;font-size:17px;font-weight:800}
.prog__list .g{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;font-size:14px;font-family:Georgia,'Cairo',serif;flex:none}
.prog__list small{font-size:13px;color:var(--ink-3);font-weight:700;width:150px}
.prog__list .go{margin-inline-start:auto;width:36px;height:36px;border-radius:18px;border:1px solid #E2DED3;display:grid;place-items:center;color:var(--ink-2);text-decoration:none}
.prog__panel[hidden]{display:none}
.toolbar{position:absolute;bottom:-30px;left:50%;transform:translateX(-50%);height:64px;border-radius:32px;background:#fff;box-shadow:0 20px 40px rgba(27,30,58,.18);display:flex;align-items:center;gap:6px;padding:0 10px;z-index:3}
.toolbar button{height:44px;padding:0 16px;border-radius:22px;border:0;background:transparent;display:flex;align-items:center;gap:8px;cursor:pointer;color:var(--ink-3);font-size:14px;font-weight:800}
.toolbar button svg{width:22px;height:22px}
.toolbar button[aria-selected="true"]{background:#EEF0FB;color:var(--brand-deep)}
.toolbar .next{width:48px;height:48px;padding:0;justify-content:center;border-radius:24px;background:var(--ink);color:#fff;font-size:18px}
.toolbar .sep{width:1px;height:28px;background:var(--line);margin:0 4px}
.floaty{position:absolute;z-index:2;pointer-events:none}
.floaty--sun{top:-46px;right:-40px;width:96px;height:96px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#FFE7B0,var(--gold) 55%,#B86E00);box-shadow:0 20px 40px rgba(184,110,0,.35)}
.floaty--tile{top:-34px;left:26%;width:70px;height:70px;border-radius:20px;background:linear-gradient(150deg,#FF9B7A,var(--red));box-shadow:0 16px 30px rgba(229,72,77,.3);filter:blur(2px)}
.bob{animation:bob 5s ease-in-out infinite}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -10px}}

/* جهاز الامتحان */
.exam{display:flex;min-height:620px;background:var(--ink);color:#fff}
.exam__side{position:relative;width:42%;flex:none}
.exam__side svg.blob{position:absolute;inset:0;width:100%;height:100%}
.exam__unit{position:absolute;top:-60px;right:18%}
.exam__note{position:absolute;bottom:34px;right:40px;left:20px;font-size:13px;color:#C9CBE4;font-weight:700}
.exam__main{flex:1;padding:56px 48px 40px 56px}
.exam__main .h2{font-size:38px;line-height:1.35}
.exam__main .h2 em{font-style:normal;color:#F7C35F}
.feats{list-style:none;margin:20px 0 0;padding:0}
.feats li{display:flex;gap:14px;padding:16px 0;border-top:1px solid rgba(255,255,255,.1)}
.feats i{font-style:normal;flex:none;width:36px;height:36px;border-radius:11px;background:rgba(247,166,27,.18);color:#F7C35F;display:grid;place-items:center;font-weight:900;font-size:14px}
.feats b{display:block;font-size:16px;font-weight:900}
.feats p{margin:2px 0 0;font-size:14px;line-height:1.8;color:#C9CBE4}
.unit__hint{margin:14px 0 0;font-size:13px;color:#C9CBE4;text-align:center}
.unit__hint b{color:#F7C35F}

/* الوحدة (بألوان الجهاز الحقيقي) */
.dv{width:300px;padding:18px;border-radius:20px;background:radial-gradient(circle at 15px 15px,#939BB4 0 2.4px,transparent 3px),radial-gradient(circle at calc(100% - 15px) 15px,#939BB4 0 2.4px,transparent 3px),radial-gradient(circle at 15px calc(100% - 15px),#939BB4 0 2.4px,transparent 3px),radial-gradient(circle at calc(100% - 15px) calc(100% - 15px),#939BB4 0 2.4px,transparent 3px),linear-gradient(160deg,#3A4059,#232840 55%,#171B2E);border:1px solid rgba(190,202,255,.18);box-shadow:0 30px 60px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.12)}
.scr{width:86%;margin:4px auto 14px;aspect-ratio:128/64;background:#04060B;border-radius:4px;border:5px solid #12162A;box-shadow:inset 0 2px 12px rgba(0,0,0,.95),0 0 22px rgba(150,200,255,.14);padding:3.5% 5% 3%;display:flex;flex-direction:column;line-height:1.15;overflow:hidden}
.scr *{line-height:1.15}
.scr__bar{display:flex;align-items:center;gap:6px;font-size:9px;color:#8FB6E4;font-weight:700}
.scr__ok{padding:0 5px;border-radius:2px;background:#34D399;color:#04060B;font-family:'Segoe UI',sans-serif;transition:background .3s}
.scr__ok[data-live="0"]{background:transparent;color:#6C7CA8;box-shadow:inset 0 0 0 1px #6C7CA8}
.scr__q{margin-inline-start:auto;color:#C9DBF2}
.scr__rule{height:1px;background:rgba(150,190,245,.3);margin:4px 0 3px;flex:none}
.scr__ask{font-weight:700;color:#F2F7FF;font-size:12px}
.scr__opts{display:grid;grid-template-columns:1fr 1fr;gap:0 12px;margin:3px 0 0;padding:0;list-style:none;font-size:10.5px;color:#B9CEE8}
.scr__opts b{font-size:9px;color:#6F9FD8;display:inline-block;min-width:13px;text-align:center;border-radius:2px;margin-inline-end:4px;font-family:'Segoe UI',sans-serif}
.scr__opts li[data-on="1"] b{background:#F2B33D;color:#04060B}
.scr__opts li[data-on="1"] span{background:#F2B33D;color:#04060B;padding:0 3px;border-radius:2px}
.scr__foot{margin-top:auto;display:flex;font-size:9px;color:#8FB6E4}
.scr__foot span:last-child{margin-inline-start:auto;color:#C9DBF2}
.pad{direction:ltr;display:grid;grid-template-columns:repeat(4,1fr);gap:7px;width:88%;margin:0 auto;padding:10px;border-radius:10px;background:linear-gradient(#20263C,#151929);box-shadow:inset 0 2px 8px rgba(0,0,0,.55)}
.key{aspect-ratio:1;display:grid;place-items:center;font-family:'Segoe UI',sans-serif;font-weight:700;font-size:14px;color:#E8ECFF;background:linear-gradient(#434A6A,#2C3150);border:0;border-radius:6px;box-shadow:0 3px 0 #161A2C,inset 0 1px 0 rgba(255,255,255,.14);cursor:pointer;transition:transform .07s,box-shadow .07s,filter .15s}
.key--gold{color:var(--ink);background:linear-gradient(#F7C35F,#E29A1B);box-shadow:0 3px 0 #8A5A0B,inset 0 1px 0 rgba(255,255,255,.45)}
.key:hover{filter:brightness(1.15)}
.key[data-hit="1"],.key:active{transform:translateY(3px);box-shadow:none;filter:brightness(1.3)}
.navrow{display:flex;justify-content:center;gap:36px;margin-top:16px}
.rnd{width:40px;height:40px;border-radius:50%;border:0;cursor:pointer;box-shadow:0 4px 0 rgba(0,0,0,.45),inset 0 2px 3px rgba(255,255,255,.4),inset 0 -3px 6px rgba(0,0,0,.35)}
.rnd--prev{background:radial-gradient(circle at 34% 30%,#6B7294,#3A4060 62%,#23273B)}
.rnd--next{background:radial-gradient(circle at 34% 30%,#9CA2F2,#4C53A4 62%,#2E336F)}
.rnd[data-hit="1"],.rnd:active{transform:translateY(3px);box-shadow:none}

/* المجلّة */
.mag__head{display:flex;align-items:flex-end;gap:16px}
.mag__head .h2{flex:1}
.mag__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:28px}
.art{border-radius:26px;overflow:hidden;background:#fff;box-shadow:0 20px 50px rgba(27,30,58,.1);text-decoration:none;color:var(--ink);display:flex;flex-direction:column;transition:transform .3s ease-out,box-shadow .3s}
.art:hover{color:var(--ink);box-shadow:0 26px 60px rgba(27,30,58,.16)}
.art__pic{height:200px}
.art__pic svg{width:100%;height:100%}
.art__body{padding:18px 22px 22px}
.art__tag{font-size:12px;font-weight:800}
.art h3{margin:6px 0 0;font-size:18px;font-weight:900;line-height:1.6}

/* الحساب والتواصل */
.lms{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);overflow:hidden;background:linear-gradient(150deg,var(--brand),var(--brand-deep) 65%,var(--ink))}
.lms__gates{padding:50px 56px;color:#fff}
.lms__gates .h2{color:#fff;font-size:36px}
.lms__gates p{margin:6px 0 0;font-size:15px;color:#DADCF2}
.lms__gates p a{color:var(--gold-lit)}
.gates{display:flex;flex-direction:column;gap:10px;margin-top:22px}
.gate{height:72px;border-radius:22px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);display:flex;align-items:center;gap:14px;padding:0 20px;color:#fff;text-decoration:none;font-weight:800;font-size:16px}
.gate:hover{color:#fff;background:rgba(255,255,255,.16)}
.gate small{display:block;font-size:12.5px;font-weight:600;color:#C9CBE4}
.gate i{font-style:normal;margin-inline-start:auto;width:36px;height:36px;border-radius:18px;background:#fff;color:var(--brand-deep);display:grid;place-items:center;flex:none}
.contact{margin:24px;border-radius:30px;background:#fff;padding:36px;display:flex;flex-direction:column;gap:12px}
.contact .h2{font-size:30px}
.contact__addr{font-size:14px;color:var(--ink-2);font-weight:700}
.contact__btns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:6px}
.contact__btns .pill{height:50px;font-size:15px;padding:0 14px}
.pill--teal{background:var(--teal-bg);color:var(--teal)}.pill--teal:hover{color:var(--teal)}
.pill--soft{background:#EEF0FB;color:var(--brand-deep)}
.mails{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.mails a{height:36px;padding:0 12px;border-radius:18px;background:#F4F2EC;color:var(--ink);font-size:13px;font-weight:800;text-decoration:none;display:flex;align-items:center}
.contact__land{margin-top:auto;font-size:13px;color:var(--ink-3);font-weight:700}
.contact__land a{color:var(--ink-2);text-decoration:none;direction:ltr;display:inline-block}

/* التذييل */
.foot{margin-top:90px;padding:34px 0 40px;color:var(--ink-2);font-size:14px;font-weight:700}
.foot__in{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.foot__in img{width:36px;height:36px}
.foot nav{margin-inline-start:auto;display:flex;gap:18px;flex-wrap:wrap}
.foot nav a{text-decoration:none}
.social{display:flex;gap:8px}
.social a{width:40px;height:40px;border-radius:12px;background:#fff;display:grid;place-items:center;color:var(--brand-deep)}
.social svg{width:20px;height:20px}

/* ══════════════ الهاتف ══════════════ */
@media (max-width:900px){
  .nav,.top .pill{display:none}
  .menubtn{display:grid}
  .top{height:64px;gap:8px;padding:0 14px}
  .brand__logo{width:38px;height:38px;border-radius:12px}
  .brand__logo img{width:30px;height:30px}
  .brand b{font-size:15px}.brand small{display:none}
  .magnav{height:36px;padding:0 12px;font-size:13px}
  .magnav__new,.mn-long{display:none}
  .mn-short{display:inline}
  .hero{height:auto;min-height:0;padding:96px 0 130px}
  .hero__scrim{background:linear-gradient(180deg,rgba(16,18,46,.35) 0%,rgba(16,18,46,.05) 30%,rgba(16,18,46,.55) 62%,rgba(16,18,46,.75) 100%)}
  .emblem{position:relative;top:auto;left:auto;width:230px;height:230px;margin:10px auto 0}
  .emblem__orbit span{width:40px;height:40px;border-radius:12px}
  .emblem__orbit svg{width:20px;height:20px}
  .emblem__orbit .o1{top:-20px;left:calc(50% - 20px)}.emblem__orbit .o2{top:calc(50% - 20px);left:-20px}
  .emblem__orbit .o3{bottom:-20px;left:calc(50% - 20px)}.emblem__orbit .o4{top:calc(50% - 20px);right:-20px}
  .hero__text{position:relative;top:auto;right:auto;width:auto;margin:36px 20px 0;text-align:center}
  .hero__eyebrow{font-size:14px;margin-top:12px}
  .hero h1{font-size:34px;line-height:1.3}
  .hero__line{font-size:15px;line-height:1.8}
  .hero__acts{flex-direction:column}
  .hero__acts .pill{width:100%}
  .glow-follow{display:none}
  .dock{display:flex;position:fixed;bottom:12px;left:12px;right:12px;z-index:40;height:64px;border-radius:22px;background:rgba(255,255,255,.97);box-shadow:0 14px 34px rgba(16,18,46,.3);align-items:center;padding:0 6px;transition:transform .3s ease}
  .dock[data-hide="1"]{transform:translateY(120%)}
  .dock a{flex:1;display:flex;flex-direction:column;align-items:center;gap:1px;font-size:11px;font-weight:800;color:#3A3E58;text-decoration:none}
  .dock a svg{width:21px;height:21px}
  .dock a.dock__cta{flex:1.5;height:48px;border-radius:16px;background:var(--ink);color:#fff;justify-content:center;font-size:13px}
  .sec{padding-top:56px}
  .frame{border-radius:28px}
  .h2{font-size:26px;line-height:1.35}
  .prog{flex-direction:column;min-height:0}
  .prog__side{width:auto;height:190px;border-radius:28px 28px 0 0}
  .prog__word{top:14px;right:-14px;font-size:96px}
  .prog__book{width:150px;bottom:10px;right:auto;left:18px}
  .prog__count{bottom:14px;right:16px}
  .prog__main{padding:0 0 12px}
  .prog__head{padding:14px 18px 0}
  .prog__cols{display:none}
  .prog__list li{height:56px;padding:0 18px;font-size:16px}
  .prog__list small{display:none}
  .toolbar{position:static;transform:none;order:-1;border-radius:0;box-shadow:none;background:#F7F6F2;height:auto;padding:8px;gap:4px}
  .toolbar button{flex:1;justify-content:center;padding:0 8px;font-size:13px}
  .toolbar button svg,.toolbar .sep,.toolbar .next{display:none}
  .floaty{display:none}
  .exam{flex-direction:column;min-height:0;border-radius:28px}
  .exam__side{width:auto;padding:26px 0 10px}
  .exam__side svg.blob{display:none}
  .exam__unit{position:static}
  .dv{width:270px;margin:0 auto}
  .exam__note{position:static;text-align:center;margin-top:12px}
  .exam__main{padding:10px 18px 14px}
  .exam__main .h2{font-size:24px}
  .mag__grid{display:flex;overflow-x:auto;gap:12px;margin:14px -16px 0;padding:0 16px 18px;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none}
  .mag__grid::-webkit-scrollbar{display:none}
  .art{flex:none;width:250px;scroll-snap-align:start;transform:none!important}
  .art__pic{height:130px}
  .art h3{font-size:15px}
  .lms{grid-template-columns:1fr;border-radius:28px}
  .lms__gates{padding:24px 16px 0}
  .lms__gates .h2{font-size:26px}
  .gate{height:62px;font-size:15px}
  .contact{margin:16px;padding:20px 16px}
  .contact .h2{font-size:21px}
  .foot{margin-top:40px;padding-bottom:110px;text-align:center}
  .foot__in{flex-direction:column}
  .foot nav{margin:0;justify-content:center}
}

@media (prefers-reduced-motion:reduce){
  .rk,.rk-pop,.rk-side{animation:none!important}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ══════════════ الفصول كبطاقات (السحب والتمرير) ══════════════
   كلّ بطاقةٍ تتّسع للشاشة فلا يلزمها تمريرٌ داخليّ قبل الانتقال.
   على الهاتف تتفكّك الأقسام الكبيرة إلى بطاقاتٍ أصغر (الجهاز، ميزاته،
   البوّابات، التواصل). بلا جافاسكربت أو مع «تقليل الحركة» تبقى الصفحة
   تمريراً عادياً. المنحنى ease-in: بطيءٌ في أوّله، سريعٌ في آخره. */
html.pager,html.pager body{height:100%;overflow:hidden}
.deck{position:fixed;inset:0;overflow:hidden;background:#12142A}
.deck{perspective:1600px}
.chap{transform-origin:50% 0;position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;background:var(--bg);transform:translate3d(0,100%,0) rotateX(-12deg);border-radius:34px 34px 0 0;box-shadow:0 -24px 60px rgba(16,18,46,.35);-webkit-overflow-scrolling:touch;scrollbar-width:none}
.chap::-webkit-scrollbar{display:none}
.chap.is-active{transform:none;border-radius:0}
.chap.is-past{transform:translate3d(0,-5%,0) scale(.9) rotateX(7deg);filter:brightness(.55);border-radius:34px}
.chap.anim{transition:transform .42s cubic-bezier(.5,.08,.85,.55),filter .42s cubic-bezier(.5,.08,.85,.55),border-radius .42s cubic-bezier(.5,.08,.85,.55)}
.chap.anim.fast{transition-duration:.26s;transition-timing-function:cubic-bezier(.4,.35,.8,.8)}
.chap .hero{height:100%;min-height:0}
.chap > .sec,.chap > main > .sec{min-height:100%;display:flex;flex-direction:column;justify-content:center;padding-top:44px;padding-bottom:44px}
.chap #programs .prog{min-height:min(640px,calc(100svh - 120px))}
.chap #exam{padding-top:96px!important}
.chap .exam{min-height:min(620px,calc(100svh - 150px))}
.chap .foot{margin-top:28px;padding-bottom:28px}
.exam__mtitle{display:none}
.swipe-hint{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);z-index:5;color:#fff;font-size:13px;font-weight:800;display:flex;flex-direction:column;align-items:center;gap:2px;text-shadow:0 1px 8px rgba(10,12,40,.5);pointer-events:none;animation:hint 2s cubic-bezier(.6,0,.9,.4) infinite}
@keyframes hint{0%,100%{transform:translate(-50%,0);opacity:.9}60%{transform:translate(-50%,-10px);opacity:.5}}


/* ══ حركة الدخول (Hook): البطاقة تأتي بميلانٍ ثلاثيّ الأبعاد، ومحتواها
   يصعد متتابعاً بارتدادٍ لطيف، والأجسام البارزة «تقفز» في مكانها.
   ‎backwards‎ لا ‎both‎: بعد انتهاء الحركة يعود كلّ عنصرٍ إلى حاله (ومنها
   حركة تتبّع المؤشّر). ══ */
@keyframes rgRise{from{opacity:0;transform:translate3d(0,38px,0) scale(.94)}to{opacity:1;transform:none}}
@keyframes rgPop{0%{opacity:0;transform:scale(.55) rotate(-8deg)}70%{opacity:1;transform:scale(1.06) rotate(2deg)}100%{opacity:1;transform:none}}
@keyframes rgSide{from{opacity:0;transform:translate3d(90px,0,0) skewX(-8deg)}to{opacity:1;transform:none}}
.enter .rk{animation:rgRise .62s cubic-bezier(.18,1.25,.4,1) backwards;animation-delay:calc(var(--k,0) * 70ms + 180ms)}
.enter .rk-pop{animation:rgPop .75s cubic-bezier(.2,1.2,.4,1) backwards;animation-delay:calc(var(--k,0) * 70ms + 140ms)}
.enter .rk-side{animation:rgSide .7s cubic-bezier(.2,1.15,.4,1) backwards;animation-delay:120ms}

/* ── الهاتف: بطاقاتٌ مريحة للعين، لا نسخةٌ مصغَّرة من الحاسوب ── */
@media (max-width:900px){
  .chap--m{display:flex;flex-direction:column;justify-content:center;padding:18px 14px 92px;gap:14px}
  .chap--m > .sec{min-height:0!important;padding:0!important;display:block}
  /* خلفيّة البطاقة نفسها تتبع محتواها: بلا مساحةٍ فاتحة تظهر أثناء الانزلاق */
  .chap--m:has(> .exam__side),.chap--m:has(> .exam__main){background:var(--ink)}
  .chap--m:has(> .lms__gates){background:linear-gradient(150deg,var(--brand),var(--brand-deep) 65%,var(--ink))}
  .chap--m > .exam__side,.chap--m > .exam__main,.chap--m > .lms__gates{box-shadow:none;border-radius:0}
  /* البطاقات الفاتحة (المجلّة، التواصل) تتوسّط عمودياً بلا مساحة فاتحة مقطوعة بحدّ حادّ */
  .chap--m:has(> #mag),.chap--m:has(> #contact){justify-content:center}
  /* الفصل الأخير: خلفيّته داكنة كالبطاقة التي قبله فلا يظهر حدّ فاتح أثناء الرجوع */
  .chap--m:has(> #contact){background:linear-gradient(180deg,var(--brand-deep),var(--ink))}
  .chap--m > #contact{box-shadow:none}
  .chap--m > .foot{color:#C9CBE4}
  .chap--m > .foot a{color:#C9CBE4}
  .chap--m > *{flex:none}
  .chap--m .toolbar button{font-size:12px;white-space:nowrap;padding:0 6px}
  .chap--m > .sec > .shell{width:100%}
  /* البداية */
  .chap .hero{display:flex;flex-direction:column;justify-content:center;padding:70px 0 96px}
  .chap .emblem{width:170px;height:170px;margin:0 auto}
  .chap .hero__text{margin:22px 18px 0}
  .chap .hero h1{font-size:29px}
  .chap .hero__eyebrow{font-size:13px}
  .chap .hero__line{font-size:14px;margin-top:8px}
  .chap .hero__acts{margin-top:16px;gap:8px}
  .chap .hero__acts .pill{height:48px}
  .chap .wxchip{height:32px;font-size:13px}
  .swipe-hint{bottom:88px}
  /* البرامج */
  .chap--m .prog__side{height:140px}
  .chap--m .prog__word{font-size:78px}
  .chap--m .prog__book{width:118px}
  .chap--m .prog__head .h2{font-size:22px}
  .chap--m .prog__blurb{font-size:13px;margin-top:2px}
  .chap--m .prog__list li{height:50px}
  /* الجهاز وحده في بطاقة، وميزاته في أخرى */
  .chap--m > .exam__side,.chap--m > .exam__main{background:var(--ink);color:#fff;border-radius:28px;padding:22px 18px;box-shadow:0 20px 44px rgba(27,30,58,.2)}
  .chap--m > .exam__side{width:auto}
  .exam__mtitle{display:block;margin:0 0 14px;text-align:center;font-size:21px;font-weight:900;color:#fff}
  .chap--m .dv{width:276px}
  .chap--m .exam__note{margin-top:10px;font-size:12px}
  .chap--m > .exam__main .h2{font-size:22px}
  .chap--m > .exam__main .feats li{padding:12px 0}
  /* المجلّة */
  .chap--m .mag__head .h2{font-size:24px}
  .chap--m .art{width:78%}
  .chap--m .art__pic{height:150px}
  /* البوّابات وحدها، والتواصل وحده */
  .chap--m > .lms__gates{background:linear-gradient(150deg,var(--brand),var(--brand-deep) 65%,var(--ink));border-radius:28px;padding:26px 18px;box-shadow:0 20px 44px rgba(27,30,58,.2)}
  .chap--m > .lms__gates .gate{height:66px}
  .chap--m > .contact{margin:0;box-shadow:0 20px 44px rgba(27,30,58,.12)}
  .chap--m > .contact .contact__btns .pill{height:52px}
  .chap--m > .foot{margin:0;padding:10px 0 0}
}

/* ── الهاتف: حركةٌ مسطّحة خفيفة على معالج الرسوميات ──
   الميلان ثلاثيّ الأبعاد وفلتر السطوع على بطاقاتٍ بملء الشاشة كانا يُظهران
   مستطيلاتٍ بيضاء وطبقاتٍ متراكبة أثناء الحركة على أندرويد (مُقاسٌ بتسجيل
   الشاشة). يبقى الانزلاق والتصغير، ويُحذف الميلان والفلتر. */
@media (max-width:900px){
  .deck{perspective:none}
  .chap{transform:translate3d(0,100%,0);box-shadow:0 -10px 30px rgba(16,18,46,.25);backface-visibility:hidden;will-change:transform;filter:none}
  .chap.is-active{transform:translate3d(0,0,0)}
  .chap.is-past{transform:translate3d(0,-4%,0) scale(.94);filter:none}
  .chap.anim{transition-property:transform,border-radius!important}
}

/* ══════════════ سنا وسراج ══════════════
   شخصيّتا رسالتي من لوحة التصميم (webp شفّافة، ٧–٢٠ك). تطفو بلطف، وتتبع
   المؤشّر كطبقة (par)، وتقفز مع دخول البطاقة (rk-pop). */
@keyframes mascFloat{0%,100%{translate:0 0}50%{translate:0 -10px}}
.masc{position:absolute;pointer-events:none;user-select:none;filter:drop-shadow(0 18px 30px rgba(10,12,40,.35));animation:mascFloat 5.5s ease-in-out infinite;z-index:3}
.masc--hero{width:250px;height:auto;left:max(16px,calc((100% - var(--shell))/2 - 20px));bottom:30px;animation-delay:-1.2s}
.masc--prog{width:200px;height:auto;right:auto;left:8%;bottom:8px;animation-delay:-2s}
.masc--exam{width:210px;height:auto;left:8px;bottom:40px;animation-delay:-.6s}
.masc--mag{width:110px;height:auto;position:absolute;left:6px;top:-178px;animation-delay:-3s}
.masc--lms{width:180px;height:auto;left:24px;bottom:16px;animation-delay:-1.8s}
.mag__head{position:relative}
.lms__gates{position:relative}
.exam__side{overflow:visible}
@media (max-width:900px){
  .masc{filter:drop-shadow(0 10px 18px rgba(10,12,40,.35))}
  .masc--hero{width:118px;left:14px;right:auto;bottom:74px;top:auto}
  .chap .hero{position:relative}
  .masc--prog{display:none}
  .chap--m > .exam__side{position:relative}
  .masc--exam{width:104px;left:-4px;top:auto;bottom:120px}
  .masc--mag{width:92px;top:-104px;left:8px}
  .masc--lms{width:100px;left:8px;bottom:auto;top:-98px}
}
@media (prefers-reduced-motion:reduce){.masc{animation:none}}