/* ══════════════════════════════════════════════════════════════
   أمد تري — نظام التصميم المشترك
   سينمائي · نمطان (ليلي/نهاري) · انفوجرافيك متحرك
   ══════════════════════════════════════════════════════════════ */

/* ─────────── النمط الليلي (الافتراضي) ─────────── */
:root{
  --scrim: 41,33,26;
  --tint:  49,26,14;
  --bg:    #29211A;
  --bg-2:  #221B15;
  --bg-3:  #332A22;
  --glass: rgba(255,255,255,.05);
  --glass-2: rgba(255,255,255,.09);
  --line:  rgba(247,242,240,.13);
  --line-2:rgba(247,242,240,.24);
  --acc:   #F25924;
  --acc-vivid: #F25924;
  --btn-bg: #F25924;
  --btn-fg: #2A1206;
  --acc-2: #FF7A4D;
  --acc-soft: rgba(242,89,36,.15);
  --warm:  #E8A33D;
  --ink:   #F7F2F0;
  --mut:   rgba(247,242,240,.66);
  --dim:   rgba(247,242,240,.42);
  --img:   1;
  --shadow: 0 32px 70px -34px rgba(0,0,0,.9);
  --rail:  54px;
  --gut:   clamp(20px,5vw,80px);
  --band:  clamp(80px,9.5vw,158px);
  --e:     cubic-bezier(.22,.61,.36,1);
}
/* ─────────── النمط النهاري ─────────── */
:root[data-theme="light"]{
  --scrim: 251,248,246;
  --tint:  120,74,50;
  --bg:    #FBF8F6;
  --bg-2:  #F3EDE8;
  --bg-3:  #E9E1DA;
  --glass: rgba(41,33,26,.035);
  --glass-2: rgba(41,33,26,.065);
  --line:  rgba(41,33,26,.14);
  --line-2:rgba(41,33,26,.26);
  --acc:   #C2451A;
  --acc-vivid: #F25924;
  --btn-bg: #C2451A;
  --btn-fg: #FFFFFF;
  --acc-2: #A5380F;
  --acc-soft: rgba(194,69,26,.12);
  --warm:  #B8720F;
  --ink:   #29211A;
  --mut:   rgba(41,33,26,.7);
  --dim:   rgba(41,33,26,.48);
  --img:   .95;
  --shadow: 0 26px 56px -30px rgba(41,33,26,.3);
}

/* ─────────── النمط الأزرق — هوية الشعار ─────────── */
:root[data-theme="blue"]{
  --scrim: 12,16,36;
  --tint:  18,26,66;
  --bg:    #0C1024;
  --bg-2:  #0F142C;
  --bg-3:  #171E3C;
  --glass: rgba(255,255,255,.05);
  --glass-2: rgba(255,255,255,.09);
  --line:  rgba(232,237,255,.13);
  --line-2:rgba(232,237,255,.25);
  --acc:   #6B86F0;
  --acc-2: #8AA4FF;
  --acc-soft: rgba(107,134,240,.16);
  --acc-vivid: #7C96F5;
  --btn-bg: #2B3990;
  --btn-fg: #FFFFFF;
  --warm:  #E8A33D;
  --ink:   #EEF1FB;
  --mut:   rgba(238,241,251,.68);
  --dim:   rgba(238,241,251,.44);
  --img:   1;
  --shadow: 0 32px 70px -34px rgba(0,0,0,.92);
}
:root[data-theme="blue"] .hero__bg video,
:root[data-theme="blue"] .hero__bg img,
:root[data-theme="blue"] .card img,
:root[data-theme="blue"] .call img{filter:saturate(.55) brightness(.82) hue-rotate(-14deg)}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:92px}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
}
body{margin:0;background:var(--bg);color:var(--ink);overflow-x:hidden;
  font-family:"IBM Plex Sans Arabic",system-ui,sans-serif;font-size:1.0625rem;
  line-height:1.95;font-weight:300;-webkit-font-smoothing:antialiased;
  transition:background .5s var(--e),color .5s var(--e)}
/* حبيبات الفيلم — ليلاً فقط */
body::after{content:"";position:fixed;inset:0;z-index:99;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='180' height='180' filter='url(%23n)' opacity='.5'/></svg>")}
:root[data-theme="light"] body::after{opacity:.02}

h1,h2,h3,h4{font-family:"Readex Pro",system-ui,sans-serif;margin:0;line-height:1.28;font-weight:400}
h1{font-size:clamp(2.6rem,6vw,5.4rem);font-weight:300;line-height:1.08;letter-spacing:-.03em}
h2{font-size:clamp(1.8rem,3.5vw,3rem);font-weight:400;line-height:1.2;letter-spacing:-.022em}
h3{font-size:clamp(1.08rem,1.5vw,1.26rem);font-weight:500}
p{margin:0 0 1.1em;max-width:64ch}
a{color:inherit}
.shell{padding-inline-end:var(--rail)}
.wrap{max-width:1220px;margin-inline:auto;padding-inline:var(--gut)}
.lede{font-size:clamp(1.04rem,1.4vw,1.2rem);color:var(--mut);line-height:2.05}
.skip{position:absolute;inset-inline-start:-9999px}
.skip:focus{inset-inline-start:var(--gut);top:9px;z-index:200;background:var(--acc);color:#fff;padding:10px 16px}
:where(a,button):focus-visible{outline:2px solid var(--acc);outline-offset:4px}
.mut{color:var(--mut)}

/* ═══════════ التنقل ═══════════ */
.nav{position:fixed;inset-inline:0 var(--rail);top:0;z-index:80;
  transition:background .4s var(--e),border-color .4s var(--e)}
.nav.stuck{background:rgba(var(--scrim),.82);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}
.nav__in{display:flex;align-items:center;gap:clamp(10px,2.2vw,30px);min-height:78px;
  max-width:1220px;margin-inline:auto;padding-inline:var(--gut)}
.brand{display:flex;align-items:center;text-decoration:none;flex:none}
.brand img{height:34px;width:auto;display:block}
.brand .lg-blue{display:none}
:root[data-theme="light"] .brand .lg-white{display:none}
:root[data-theme="light"] .brand .lg-blue{display:block}
.foot .brand img{height:40px}
.nav nav{margin-inline-start:auto;display:flex;gap:clamp(8px,1.6vw,22px)}
.nav nav a{text-decoration:none;font-size:.93rem;color:var(--mut);padding:7px 3px;position:relative;
  transition:color .3s var(--e)}
.nav nav a::after{content:"";position:absolute;inset-inline:0;bottom:2px;height:1px;background:var(--acc);
  transform:scaleX(0);transform-origin:right;transition:transform .35s var(--e)}
.nav nav a:hover,.nav nav a.on{color:var(--ink)}
.nav nav a:hover::after,.nav nav a.on::after{transform:scaleX(1)}
@media(max-width:1040px){.nav nav{display:none}}

/* مبدّل النمط */
.tgl{width:40px;height:40px;flex:none;display:grid;place-items:center;cursor:pointer;
  background:var(--glass);border:1px solid var(--line);border-radius:50%;color:var(--ink);
  transition:border-color .3s var(--e),background .3s var(--e),transform .3s var(--e)}
.tgl:hover{border-color:var(--acc);background:var(--acc-soft);transform:rotate(18deg)}
.tgl svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.tgl .sun,.tgl .drop{display:none}
:root[data-theme="light"] .tgl .moon{display:none}
:root[data-theme="light"] .tgl .sun{display:block}
:root[data-theme="blue"] .tgl .moon{display:none}
:root[data-theme="blue"] .tgl .drop{display:block}

/* ═══════════ الأزرار ═══════════ */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:"Readex Pro",sans-serif;
  font-size:.98rem;font-weight:500;padding:.84em 1.75em;text-decoration:none;cursor:pointer;
  background:var(--btn-bg);color:var(--btn-fg);border:1px solid var(--btn-bg);border-radius:2px;
  transition:box-shadow .4s var(--e),transform .3s var(--e),background .3s var(--e)}
.btn:hover{filter:brightness(1.12);transform:translateY(-2px);box-shadow:0 12px 40px -14px var(--btn-bg)}
.btn--g{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn--g:hover{background:var(--glass-2);border-color:var(--acc);color:var(--acc);box-shadow:none}
.row{display:flex;gap:13px;flex-wrap:wrap;margin-top:clamp(22px,2.8vw,34px)}

/* ═══════════ السلّم — الخط خلف الأرقام وخافت ═══════════ */
.rail{position:fixed;inset-block:0;inset-inline-end:0;width:var(--rail);z-index:85;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  pointer-events:none}
/* المسار محاذٍ لعمود النقاط لا لمركز الأرقام */
.rail__track{position:absolute;top:50%;translate:0 -50%;inset-inline-end:18px;
  width:1px;height:390px;background:var(--line);opacity:.5;z-index:0}
.rail__fill{position:absolute;top:0;inset-inline:0;height:0;background:var(--acc);
  opacity:.34;transition:height .18s linear}
.rail__list{position:relative;z-index:3;display:flex;flex-direction:column;gap:22px;pointer-events:auto}
.rail__list a{position:relative;display:flex;align-items:center;justify-content:flex-start;
  width:38px;height:18px;padding-inline-end:16px;text-decoration:none;
  font-family:"Readex Pro",sans-serif;font-size:.76rem;color:var(--dim);
  transition:color .3s var(--e),transform .3s var(--e)}
.rail__list a::before{content:"";position:absolute;inset-inline-end:-3px;width:6px;height:6px;
  background:var(--bg);border:1px solid var(--line-2);border-radius:50%;transition:all .3s var(--e)}
.rail__list a:hover{color:var(--ink);transform:translateX(-3px)}
.rail__list a[aria-current]{color:var(--acc);font-weight:500;transform:translateX(-4px)}
.rail__list a[aria-current]::before{background:var(--acc);border-color:var(--acc);transform:scale(1.3)}
.rail__list a[aria-current]::after{content:"";position:absolute;inset-inline-end:-8px;width:16px;height:16px;
  border:1px solid var(--acc);border-radius:50%;opacity:.7;animation:pulse 2s var(--e) infinite}
@keyframes pulse{0%{transform:scale(.45);opacity:.75}70%{transform:scale(1.6);opacity:0}100%{opacity:0}}
.rail__cap{display:none}
@media(max-width:1040px){.rail{display:none}.shell{padding-inline-end:0}.nav{inset-inline:0}}

/* ═══════════ الأقسام ═══════════ */
.sec{position:relative;padding-block:var(--band)}
.sec--2{background:var(--bg-2)}
.sec--3{background:var(--bg-3)}
.plate{display:grid;grid-template-columns:auto 1fr;gap:clamp(16px,2.3vw,30px);
  align-items:start;margin-bottom:clamp(32px,4.2vw,58px)}
.plate__no{font-family:"Readex Pro",sans-serif;font-size:clamp(1.3rem,1.9vw,1.72rem);font-weight:500;
  color:var(--acc);background:var(--glass);min-width:68px;padding:12px 4px 14px;text-align:center;
  border:1px solid var(--line);line-height:1;backdrop-filter:blur(10px);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%)}
.plate__no small{display:block;font-family:"IBM Plex Sans Arabic",sans-serif;font-size:.56rem;
  font-weight:400;letter-spacing:.18em;color:var(--dim);margin-top:6px}
.kick{font-family:"Readex Pro",sans-serif;font-size:.89rem;color:var(--acc);display:block;margin-bottom:.5em}
.plate__t h2{margin-bottom:.32em}

/* ═══════════ الظهور والتدرّج ═══════════ */
.js .rv{opacity:0;transform:translateY(26px);transition:opacity .8s var(--e),transform .8s var(--e)}
.js .rv.in{opacity:1;transform:none}
.js .stg>*{opacity:0;transform:translateY(24px);transition:opacity .7s var(--e),transform .7s var(--e)}
.js .stg.in>*{opacity:1;transform:none}
.js .stg.in>*:nth-child(1){transition-delay:.03s}.js .stg.in>*:nth-child(2){transition-delay:.1s}
.js .stg.in>*:nth-child(3){transition-delay:.17s}.js .stg.in>*:nth-child(4){transition-delay:.24s}
.js .stg.in>*:nth-child(5){transition-delay:.31s}.js .stg.in>*:nth-child(6){transition-delay:.38s}
.js .stg.in>*:nth-child(7){transition-delay:.45s}.js .stg.in>*:nth-child(8){transition-delay:.52s}
@media (prefers-reduced-motion:reduce){.js .rv,.js .stg>*{opacity:1;transform:none}}

.glass{background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(16px);
  transition:border-color .4s var(--e),background .4s var(--e),transform .4s var(--e),box-shadow .4s var(--e)}
.glass:hover{border-color:var(--acc);background:var(--glass-2);transform:translateY(-5px);box-shadow:var(--shadow)}

/* ═══════════ الواجهة السينمائية ═══════════ */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;
  padding-block:clamp(120px,15vh,186px) clamp(46px,7vh,88px)}
.hero--sm{min-height:62svh;align-items:center;padding-block:clamp(130px,16vh,190px) clamp(46px,7vh,80px)}
.hero__bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero__bg img{width:100%;height:100%;object-fit:cover;display:block;opacity:var(--img);
  filter:saturate(.7) brightness(.88) sepia(.2);
  animation:kb 28s ease-in-out infinite alternate}
@keyframes kb{from{transform:scale(1.04)}to{transform:scale(1.14)}}
.hero__bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  opacity:var(--img);filter:saturate(.72) brightness(.9) sepia(.18)}
.hero__bg::after{content:"";position:absolute;inset:0;
  background:
    linear-gradient(rgba(var(--tint),.3),rgba(var(--tint),.3)),
    linear-gradient(to top,rgb(var(--scrim)) 2%,rgba(var(--scrim),.56) 36%,rgba(var(--scrim),.2) 66%,rgba(var(--scrim),.6) 100%),
    linear-gradient(to left,rgba(var(--scrim),.92) 0%,rgba(var(--scrim),.38) 46%,transparent 78%),
    radial-gradient(90% 60% at 76% 62%,var(--acc-soft),transparent 62%)}
/* الوضع الفاتح: نص داكن فوق صورة يحتاج حجابًا أقوى */
:root[data-theme="light"] .hero__bg::after{
  background:
    linear-gradient(to top,rgb(var(--scrim)) 2%,rgba(var(--scrim),.66) 44%,rgba(var(--scrim),.4) 100%),
    linear-gradient(to left,rgba(var(--scrim),.94) 0%,rgba(var(--scrim),.6) 54%,rgba(var(--scrim),.12) 100%),
    radial-gradient(90% 60% at 76% 62%,var(--acc-soft),transparent 62%)}
:root[data-theme="light"] .hero h1{text-shadow:0 1px 22px rgba(251,248,246,.95)}
:root[data-theme="light"] .hero__bg video,
:root[data-theme="light"] .hero__bg img,
:root[data-theme="light"] .card img,
:root[data-theme="light"] .call img{filter:saturate(.62) brightness(1.02) sepia(.3)}
:root[data-theme="light"] .card::after{
  background:linear-gradient(to top,rgba(var(--scrim),.98) 10%,rgba(var(--scrim),.82) 52%,rgba(var(--scrim),.45) 100%)}
.hero__in{position:relative;z-index:3;width:100%;max-width:1220px;margin-inline:auto;padding-inline:var(--gut)}
.tagp{display:inline-flex;align-items:center;gap:10px;font-family:"Readex Pro",sans-serif;
  font-size:.87rem;color:var(--acc);border:1px solid var(--acc);background:var(--acc-soft);
  backdrop-filter:blur(8px);padding:.36em 1.05em;border-radius:40px;margin-bottom:1.5em;direction:ltr}
.tagp i{width:6px;height:6px;border-radius:50%;background:var(--acc);animation:blip 2.2s infinite}
@keyframes blip{0%,100%{opacity:1}50%{opacity:.2}}
.hero h1 em{font-style:normal;color:var(--acc-vivid)}
.hero .lede{max-width:46ch}
.hero__foot{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  margin-top:clamp(32px,5vh,60px);flex-wrap:wrap}
.hero__hint{display:flex;align-items:center;gap:12px;font-size:.84rem;color:var(--dim)}
.hero__hint i{display:block;width:40px;height:1px;background:var(--line-2);position:relative;overflow:hidden}
.hero__hint i::after{content:"";position:absolute;inset:0;background:var(--acc);animation:sl 2.8s var(--e) infinite}
@keyframes sl{0%{transform:translateX(100%)}60%,100%{transform:translateX(-100%)}}
.crumb{font-size:.88rem;color:var(--dim);margin-bottom:1.1em}
.crumb a{color:var(--acc);text-decoration:none}
.crumb a:hover{text-decoration:underline}

/* ═══════════ الشبكات ═══════════ */
.g{display:grid;gap:clamp(14px,1.6vw,22px)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1020px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:660px){.g2,.g3,.g4{grid-template-columns:1fr}}

/* ═══════════ بطاقة: صورة + انفوجرافيك متحرك ═══════════ */
.card{position:relative;overflow:hidden;min-height:380px;display:flex;flex-direction:column;
  justify-content:flex-end;padding:clamp(22px,2.4vw,30px);border:1px solid var(--line);
  transition:border-color .45s var(--e),transform .45s var(--e),box-shadow .45s var(--e)}
.card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  opacity:calc(.8 * var(--img));filter:saturate(.5) brightness(.85) sepia(.42);
  transition:transform 1s var(--e),opacity .45s var(--e)}
.card::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,rgba(var(--scrim),.97) 8%,rgba(var(--scrim),.66) 48%,rgba(var(--scrim),.2) 100%)}
.card>*{position:relative;z-index:2}
.card:hover{transform:translateY(-6px);border-color:var(--acc);box-shadow:var(--shadow)}
.card:hover img{transform:scale(1.08);opacity:var(--img)}
.card__no{position:absolute;top:18px;inset-inline-end:20px;z-index:3;font-family:"Readex Pro",sans-serif;
  font-size:.75rem;color:var(--dim);letter-spacing:.12em}
/* الانفوجرافيك فوق الصورة */
.card__viz{position:absolute;top:14px;inset-inline-start:16px;z-index:3;width:84px;height:84px}
.card__viz svg{width:100%;height:100%;overflow:visible}
.card h3{margin-bottom:.44em}
.card p{font-size:.95rem;color:var(--mut);margin:0;line-height:1.86}
.card__ln{width:32px;height:2px;background:var(--acc-vivid);margin-bottom:15px;transition:width .45s var(--e)}
.card:hover .card__ln{width:60px}

/* ── حركات الانفوجرافيك ── */
.dash{stroke-dasharray:var(--L,300);stroke-dashoffset:var(--L,300);transition:stroke-dashoffset 1.3s var(--e)}
.in .dash,.card:hover .dash{stroke-dashoffset:0}
.pls{transform-box:fill-box;transform-origin:center;animation:pls 2.8s var(--e) infinite}
@keyframes pls{0%,100%{transform:scale(1);opacity:.8}50%{transform:scale(1.35);opacity:1}}
.scn{animation:scn 3.6s var(--e) infinite}
@keyframes scn{0%{transform:translateY(-22px);opacity:0}15%,85%{opacity:1}100%{transform:translateY(22px);opacity:0}}
.wv{transform-box:fill-box;transform-origin:center;animation:wv 3s var(--e) infinite}
@keyframes wv{0%{transform:scale(.35);opacity:.9}100%{transform:scale(1.7);opacity:0}}
.spn{transform-box:fill-box;transform-origin:center;animation:spn 16s linear infinite}
@keyframes spn{to{transform:rotate(360deg)}}
.bob{animation:bob 3.2s var(--e) infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* ═══════════ الأرقام ═══════════ */
.figs{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(10px,1.2vw,16px)}
@media(max-width:1020px){.figs{grid-template-columns:repeat(3,1fr)}}
@media(max-width:620px){.figs{grid-template-columns:repeat(2,1fr)}}
.fig{padding:22px 16px 20px;text-align:center}
.fig__arc{width:60px;height:60px;margin:0 auto 12px;display:block}
.fig__arc circle{fill:none;stroke-width:4;stroke-linecap:round}
.fig__arc .bg{stroke:var(--line)}
.fig__arc .fg{stroke:var(--acc-vivid);stroke-dasharray:157;stroke-dashoffset:157;
  transform:rotate(-90deg);transform-origin:center;transition:stroke-dashoffset 1.5s var(--e)}
.fig b{display:block;font-family:"Readex Pro",sans-serif;font-size:clamp(1.48rem,2.2vw,2rem);
  font-weight:500;color:var(--ink);line-height:1;letter-spacing:-.03em;direction:ltr}
.fig span{display:block;font-size:.82rem;color:var(--mut);margin-top:.55em;line-height:1.6}

/* ═══════════ القطاعات / الركائز ═══════════ */
.sect{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line)}
@media(max-width:940px){.sect{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.sect{grid-template-columns:1fr}}
.sect>div{background:var(--bg);padding:clamp(22px,2.4vw,32px);position:relative;transition:background .4s var(--e)}
.sect>div::before{content:"";position:absolute;top:0;inset-inline-start:0;width:0;height:2px;
  background:var(--acc-vivid);transition:width .5s var(--e)}
.sect>div:hover{background:var(--bg-2)}
.sect>div:hover::before{width:100%}
.sect h3{margin-bottom:.35em}
.sect p{font-size:.93rem;color:var(--mut);margin:0;line-height:1.85}
.pil{display:grid;grid-template-columns:repeat(5,1fr);gap:0}
@media(max-width:1020px){.pil{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.pil{grid-template-columns:1fr}}
.pil>div{padding:28px clamp(13px,1.6vw,24px);border-inline-start:1px solid var(--line);position:relative}
.pil>div:first-child{border-inline-start:0}
.pil>div::before{content:"";position:absolute;top:0;inset-inline-start:0;width:36%;height:2px;background:var(--acc-vivid)}
.pil h3{margin-bottom:.4em}
.pil p{font-size:.91rem;color:var(--mut);margin:0;line-height:1.85}

/* ═══════════ المسار ═══════════ */
.flow{position:relative;margin-top:14px}
.flow__line{position:absolute;top:23px;inset-inline:6%;height:1px;background:var(--line)}
.flow__line span{position:absolute;inset-block:0;inset-inline-start:0;width:0;background:var(--acc-vivid);
  transition:width 1.8s var(--e)}
.in .flow__line span{width:100%}
@media(max-width:1020px){.flow__line{display:none}}
.flow__g{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(12px,1.4vw,20px);position:relative}
@media(max-width:1020px){.flow__g{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.flow__g{grid-template-columns:1fr}}
.stp{text-align:center;padding:0 6px}
.stp i{display:grid;place-items:center;width:48px;height:48px;margin:0 auto 15px;
  background:var(--bg);border:1px solid var(--acc);border-radius:50%;
  font-family:"Readex Pro",sans-serif;font-style:normal;font-size:.87rem;font-weight:500;
  color:var(--acc);position:relative;z-index:2;transition:background .4s var(--e),color .4s var(--e)}
.stp:hover i{background:var(--acc);color:#fff}
.stp h3{font-size:1.04rem;margin-bottom:.35em}
.stp p{font-size:.89rem;color:var(--mut);margin:0;line-height:1.8}

/* ═══════════ شريط الشعارات المتحرك ═══════════ */
.marq{position:relative;overflow:hidden;border-block:1px solid var(--line);padding-block:6px;
  -webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marq__t{display:flex;gap:0;width:max-content;animation:marq 34s linear infinite}
.marq:hover .marq__t{animation-play-state:paused}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marq__i{flex:none;width:clamp(150px,15vw,196px);height:96px;display:grid;place-items:center;
  border-inline-start:1px solid var(--line);opacity:.5;transition:opacity .35s var(--e)}
.marq__i:hover{opacity:1}
.marq__i svg{width:60%;height:auto;fill:none;stroke:var(--ink);stroke-width:1.4;opacity:.85}

/* ═══════════ لوحة المنصة ═══════════ */
.dash2{background:var(--glass);border:1px solid var(--line);border-radius:4px;overflow:hidden;
  backdrop-filter:blur(14px);box-shadow:var(--shadow)}
.dash2__bar{display:flex;align-items:center;gap:7px;padding:12px 15px;background:var(--glass);
  border-bottom:1px solid var(--line)}
.dash2__bar i{width:8px;height:8px;border-radius:50%;background:var(--line-2)}
.dash2__bar span{margin-inline-start:auto;font-size:.72rem;color:var(--dim);font-family:"Readex Pro",sans-serif}
.dash2__body{padding:16px;display:grid;gap:12px}
.dash2__row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:520px){.dash2__row{grid-template-columns:1fr}}
.tile{background:var(--glass);border:1px solid var(--line);border-radius:3px;padding:14px}
.tile em{font-style:normal;display:block;font-size:.71rem;color:var(--dim);margin-bottom:7px}
.tile b{font-family:"Readex Pro",sans-serif;font-size:1.32rem;color:var(--acc);display:block;line-height:1.1;direction:ltr}
.tile .up{font-size:.7rem;color:var(--acc);margin-inline-start:6px;opacity:.8}
.spark{width:100%;height:46px;display:block;margin-top:8px}
.spark path{fill:none;stroke:var(--acc);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:420;stroke-dashoffset:420;transition:stroke-dashoffset 2.4s var(--e)}
.in .spark path{stroke-dashoffset:0}
.bars{display:grid;gap:9px;margin-top:4px}
.bar{display:grid;grid-template-columns:70px 1fr auto;gap:10px;align-items:center;font-size:.75rem;color:var(--mut)}
.bar u{text-decoration:none;height:5px;background:var(--line);border-radius:5px;overflow:hidden}
.bar u i{display:block;height:100%;width:0;background:var(--acc);border-radius:5px;transition:width 1.6s var(--e)}
.in .bar u i{width:var(--w,50%)}
.alerts{display:grid;gap:7px;margin-top:4px}
.alert{display:flex;align-items:center;gap:9px;font-size:.77rem;color:var(--mut);
  background:var(--acc-soft);border:1px solid var(--line);border-radius:3px;padding:9px 11px}
.alert i{width:6px;height:6px;border-radius:50%;background:var(--acc);flex:none;animation:blip 1.9s infinite}
.alert i.hot{background:var(--warm)}
.alert span{margin-inline-start:auto;color:var(--dim);font-size:.7rem;direction:ltr}

/* ═══════════ ميزات المنصة — انفوجرافيك واضح ═══════════ */
.feat{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(13px,1.5vw,20px)}
@media(max-width:1000px){.feat{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.feat{grid-template-columns:1fr}}
.ft{background:var(--glass);border:1px solid var(--line);padding:clamp(20px,2.2vw,26px);
  display:flex;flex-direction:column;transition:border-color .4s var(--e),transform .4s var(--e),background .4s var(--e)}
.ft:hover{border-color:var(--acc);transform:translateY(-5px);background:var(--glass-2)}
.ft__ic{width:52px;height:52px;margin-bottom:16px;display:grid;place-items:center;
  border:1px solid var(--line);border-radius:3px;background:var(--acc-soft)}
.ft__ic svg{width:26px;height:26px;fill:none;stroke:var(--acc);stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.ft h3{margin-bottom:.4em}
.ft p{font-size:.93rem;color:var(--mut);margin:0;line-height:1.85}

/* ═══════════ الدعوة ═══════════ */
.call{position:relative;overflow:hidden;min-height:clamp(330px,48vh,460px);
  display:flex;align-items:center;justify-content:center;text-align:center;
  padding:clamp(40px,6vw,82px) var(--gut)}
.call img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:var(--img);
  filter:saturate(.6) brightness(.76) sepia(.24)}
.call::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(rgba(var(--scrim),.88),rgba(var(--scrim),.95)),
             radial-gradient(70% 70% at 50% 50%,var(--acc-soft),transparent 66%)}
.call__in{position:relative;z-index:2;max-width:760px}
.call h2{margin-bottom:.4em}
.call p{color:var(--mut);margin-inline:auto}
.call .row{justify-content:center}

/* ═══════════ التذييل ═══════════ */
.foot{background:var(--bg-2);border-top:1px solid var(--line)}
.foot a{color:var(--mut);text-decoration:none;transition:color .25s var(--e)}
.foot a:hover{color:var(--acc)}
.foot__g{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.1fr;gap:clamp(22px,3vw,44px);
  padding-block:clamp(44px,5.2vw,74px)}
@media(max-width:880px){.foot__g{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.foot__g{grid-template-columns:1fr}}
.foot h4{color:var(--ink);font-size:.96rem;margin:0 0 1em;font-weight:500}
.foot ul{list-style:none;margin:0;padding:0;font-size:.91rem;line-height:2.3;color:var(--mut)}
.foot__bar{border-top:1px solid var(--line);padding-block:20px;font-size:.83rem;color:var(--dim);
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}

/* ═══════════ العودة للأعلى — حلقة تقدّم + سهم ═══════════ */
.up2{position:fixed;inset-block-end:24px;inset-inline-start:24px;z-index:90;width:56px;height:56px;
  display:grid;place-items:center;background:rgba(var(--scrim),.72);border:0;border-radius:50%;
  backdrop-filter:blur(14px);cursor:pointer;padding:0;
  opacity:0;visibility:hidden;transform:translateY(12px) scale(.9);
  transition:opacity .35s var(--e),transform .35s var(--e),visibility .35s}
.up2.show{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.up2:hover{transform:translateY(-3px) scale(1.06)}
.up2 .ring{position:absolute;inset:0;width:56px;height:56px;transform:rotate(-90deg)}
.up2 .ring circle{fill:none;stroke-width:2}
.up2 .ring .t{stroke:var(--line-2)}
.up2 .ring .p{stroke:var(--acc);stroke-linecap:round;stroke-dasharray:163;stroke-dashoffset:163;
  transition:stroke-dashoffset .18s linear}
.up2 .arw{position:relative;z-index:2;width:18px;height:18px;fill:none;stroke:var(--acc);
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--e)}
.up2:hover .arw{transform:translateY(-3px)}
.up2 b{position:absolute;inset-inline-start:-9999px}