/* مشهد المدينة 3D في الـHero ورسومات hairline في «ميزتنا».
   الألوان من متغيرات الموقع في main.css (--surface-color و--accent-color و--heading-color و--contrast-color)، والزاوية 20px كما في .work-process .steps-item */
.hero-media{position:relative;width:100%;max-width:500px;aspect-ratio:500/498;margin-inline:auto}
.hero-media > img{display:block;width:100%;height:100%}
.hero-stage{position:absolute;inset:0;border-radius:20px;overflow:hidden;opacity:0;visibility:hidden;transition:opacity .4s ease;
  background:radial-gradient(120% 90% at 50% 0%,var(--surface-color) 0%,color-mix(in srgb,var(--surface-color) 55%,#0b1424) 78%);
  box-shadow:0 12px 36px color-mix(in srgb,var(--surface-color) 40%,transparent)}
.hero-stage canvas{display:block;width:100%;height:100%;touch-action:pan-y}
.hero-media.scene-on .hero-stage{opacity:1;visibility:visible}
.hero-media.scene-on > img{visibility:hidden}
.hero-media.scene-failed .hero-stage{display:none}
.hero-stage .legend{position:absolute;inset-inline:12px;bottom:12px;display:flex;flex-wrap:wrap;gap:6px}
.hero-stage .legend span{font-size:12px;padding:4px 10px;border-radius:50px;display:inline-flex;align-items:center;gap:6px;
  background:color-mix(in srgb,var(--surface-color) 45%,#0b1424);color:var(--contrast-color);border:1px solid color-mix(in srgb,var(--accent-color) 55%,transparent);backdrop-filter:blur(6px)}
.hero-stage .legend i{width:9px;height:9px;border-radius:50%;display:inline-block}
html[lang^="en"] .hero-stage .lg-ar,html:not([lang^="en"]) .hero-stage .lg-en{display:none}
@media (max-width:767px){
  .hero-media{max-width:none;aspect-ratio:auto;height:300px}
  .hero-media > img{object-fit:contain}
}
/* «ميزتنا»: الرسمة فوق الأيقونة الأصلية (تبقى مكانها وتختفي عند نجاح التحميل) بعرض 150px وبألوان بطاقة الموقع */
.team .team-member .pic{position:relative}
.team .team-member .pic.has-fig{overflow:visible;border-radius:0}
.team .team-member .pic.has-fig > img{visibility:hidden}
.adv-fig{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:150px;
  --hairline-plate:var(--surface-color);--hairline-hi:var(--accent-color);--hairline-edge:var(--heading-color);
  --hairline-mid:color-mix(in srgb,var(--heading-color) 38%,var(--surface-color));--hairline-lo:color-mix(in srgb,var(--heading-color) 14%,var(--surface-color));--hairline-stroke:1}