/* Mohamed Radi Portfolio — V24 Brand + Hero + Search Intent Refinement
   Official MR identity, clean portrait presentation, Arabic mobile hero fix,
   and a compact semantic expertise index. */
:root{
  --mr24-cyan:#27e9ff;
  --mr24-blue:#0a82ff;
  --mr24-ink:#020a12;
  --mr24-panel:rgba(3,16,27,.88);
  --mr24-line:rgba(55,226,255,.23);
}

/* ---------- OFFICIAL BRAND IDENTITY ---------- */
.site-header .brand img,
.footer-brand img{
  object-fit:contain!important;
  object-position:center!important;
  background:transparent!important;
  border-radius:50%!important;
  filter:drop-shadow(0 0 10px rgba(39,233,255,.16))!important;
}
.site-header .brand img{width:48px!important;height:48px!important}
.footer-brand img{width:54px!important;height:54px!important}
.v19-logo-orb img,.v21-mobile-dragon img{object-fit:contain!important;background:transparent!important}
.v21-mobile-dragon{background:rgba(2,10,17,.88)!important}

/* ---------- CLEAN HERO ART ---------- */
/* The composite already contains the cyber globe. Remove duplicate runtime globes/network
   that can overlap the portrait (especially on the Arabic mobile layout). */
body[data-page="home"] .page-hero-v22 .v21-cyber-globe,
body[data-page="home"] .page-hero-v22 .v19-network,
body[data-page="home"] .page-hero-v22 .v19-orbit{
  display:none!important;
}

/* Desktop: preserve the approved hero, but reduce HUD clutter over the face. */
@media (min-width:761px){
  body[data-page="home"] .hero-v22 .v22-art-hud--a,
  body[data-page="home"] .hero-v22 .v22-art-hud--b{opacity:.28!important}
  body[data-page="home"] .hero-v22 .v22-art-scan{opacity:.24!important}
  html[dir="rtl"] body[data-page="home"] .page-hero-v22 .v22-art-hud,
  html[dir="rtl"] body[data-page="home"] .page-hero-v22 .v22-art-scan{opacity:.20!important}
}

/* English mobile portrait: clean face, official logo, quieter overlays. */
@media (max-width:760px){
  body[data-page="home"] .hero-v22 .v19-mobile-identity.v21-mobile-identity{
    height:420px!important;
    isolation:isolate!important;
    background:#020b13!important;
    border-color:rgba(39,233,255,.24)!important;
  }
  body[data-page="home"] .hero-v22 .v19-mobile-identity:before{
    content:""!important;
    position:absolute!important;
    inset:0!important;
    z-index:4!important;
    pointer-events:none!important;
    background:
      linear-gradient(to top,rgba(1,8,14,.68) 0,rgba(1,8,14,.12) 22%,transparent 38%),
      linear-gradient(90deg,rgba(1,8,14,.22),transparent 18%,transparent 82%,rgba(1,8,14,.18))!important;
    background-size:auto!important;
    -webkit-mask-image:none!important;
    mask-image:none!important;
  }
  body[data-page="home"] .hero-v22 .v21-mobile-globe,
  body[data-page="home"] .hero-v22 .v19-mobile-orbit{display:none!important}
  body[data-page="home"] .hero-v22 .v19-mobile-portrait{
    inset:0!important;width:100%!important;height:100%!important;z-index:2!important;
  }
  body[data-page="home"] .hero-v22 .v19-mobile-portrait:after{display:none!important}
  body[data-page="home"] .hero-v22 .v19-mobile-portrait img{
    object-fit:cover!important;
    object-position:56% 28%!important;
    transform:scale(1)!important;
    filter:saturate(1.01) contrast(1.02) brightness(1.015)!important;
  }
  body[data-page="home"] .hero-v22 .v21-mobile-dragon{
    left:12px!important;right:auto!important;top:12px!important;width:66px!important;height:66px!important;
    padding:6px!important;border-color:rgba(39,233,255,.34)!important;
    box-shadow:0 0 0 5px rgba(39,233,255,.018),0 0 24px rgba(39,233,255,.15)!important;
  }
  html[dir="rtl"] body[data-page="home"] .hero-v22 .v21-mobile-dragon{left:auto!important;right:12px!important}
  body[data-page="home"] .hero-v22 .v19-mobile-badge{
    z-index:7!important;right:12px!important;bottom:12px!important;
    background:rgba(1,12,21,.80)!important;
  }

  /* Arabic homepage uses the desktop art-stage DOM on mobile; keep the portrait/globe image
     but remove the extra globe/network layers that were crossing the face. */
  html[dir="rtl"] body[data-page="home"] .page-hero-v22 .v19-stage{
    min-height:445px!important;
    isolation:isolate!important;
    background:#020b13!important;
  }
  html[dir="rtl"] body[data-page="home"] .page-hero-v22 .v19-scene:before{
    content:"";position:absolute;inset:0;z-index:5;pointer-events:none;
    background:linear-gradient(to top,rgba(1,8,14,.66),transparent 34%);
  }
  html[dir="rtl"] body[data-page="home"] .page-hero-v22 .v22-art-shell{
    inset:0!important;width:100%!important;height:100%!important;z-index:2!important;transform:none!important;
  }
  html[dir="rtl"] body[data-page="home"] .page-hero-v22 .v22-art-shell:before,
  html[dir="rtl"] body[data-page="home"] .page-hero-v22 .v22-art-shell:after,
  html[dir="rtl"] body[data-page="home"] .page-hero-v22 .v22-art-hud,
  html[dir="rtl"] body[data-page="home"] .page-hero-v22 .v22-art-scan{display:none!important}
  html[dir="rtl"] body[data-page="home"] .page-hero-v22 .v22-art{
    width:100%!important;height:100%!important;object-fit:cover!important;object-position:56% 28%!important;
    transform:none!important;filter:saturate(1.01) contrast(1.02) brightness(1.015)!important;
    -webkit-mask-image:none!important;mask-image:none!important;
  }
  html[dir="rtl"] body[data-page="home"] .page-hero-v22 .v19-proof-cluster{
    z-index:7!important;left:10px!important;right:10px!important;bottom:10px!important;top:auto!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px!important;
  }
  html[dir="rtl"] body[data-page="home"] .page-hero-v22 .v19-proof{
    min-height:52px!important;padding:7px 9px!important;background:rgba(2,13,22,.78)!important;
    backdrop-filter:blur(10px)!important;
  }
}

@media (max-width:430px){
  body[data-page="home"] .hero-v22 .v19-mobile-identity.v21-mobile-identity{height:394px!important}
  body[data-page="home"] .hero-v22 .v19-mobile-portrait img{object-position:56% 27%!important}
  html[dir="rtl"] body[data-page="home"] .page-hero-v22 .v19-stage{min-height:410px!important}
  html[dir="rtl"] body[data-page="home"] .page-hero-v22 .v22-art{object-position:56% 27%!important}
}

/* ---------- SEMANTIC EXPERTISE INDEX ---------- */
.mr-v24-expertise-index{
  position:relative;
  z-index:5;
  padding:0 0 20px;
}
.mr-v24-expertise-index__inner{
  display:grid;
  grid-template-columns:minmax(270px,.72fr) minmax(0,1.45fr);
  gap:16px;
  align-items:center;
  padding:15px 16px;
  border:1px solid var(--mr24-line);
  border-radius:18px;
  background:linear-gradient(135deg,rgba(3,16,27,.94),rgba(3,25,41,.78));
  box-shadow:0 18px 54px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.03);
}
.mr-v24-expertise-index__copy small{
  display:block;margin-bottom:5px;color:var(--mr24-cyan);
  font:700 9px/1.3 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.14em;
}
.mr-v24-expertise-index__copy strong{display:block;color:#f3fbff;font-size:14px;line-height:1.45}
.mr-v24-expertise-index__chips{display:flex;flex-wrap:wrap;gap:7px;justify-content:flex-end}
html[dir="rtl"] .mr-v24-expertise-index__chips{justify-content:flex-start}
.mr-v24-expertise-index__chips a{
  display:inline-flex;align-items:center;min-height:34px;padding:0 10px;
  border:1px solid rgba(84,220,255,.20);border-radius:999px;
  background:rgba(2,12,22,.64);color:#bde9f3;text-decoration:none;font-size:10.5px;font-weight:700;
  transition:border-color .18s ease,background .18s ease,color .18s ease,transform .18s ease;
}
.mr-v24-expertise-index__chips a:hover{
  border-color:rgba(39,233,255,.55);background:rgba(9,69,91,.38);color:#fff;transform:translateY(-1px)
}

/* V24 map polish: clearer full-screen head and safer mobile bottom sheet. */
.mr-v23-map-shell.is-fullscreen .mr-v23-map-head{
  position:sticky;top:0;z-index:12;background:rgba(2,12,21,.94);backdrop-filter:blur(18px)
}
@media (max-width:900px){
  .mr-v24-expertise-index{padding-bottom:12px}
  .mr-v24-expertise-index__inner{grid-template-columns:1fr;gap:10px;width:calc(100% - 18px)!important;padding:13px!important;border-radius:14px}
  .mr-v24-expertise-index__chips{justify-content:flex-start!important;flex-wrap:nowrap;overflow-x:auto;padding-bottom:3px;scrollbar-width:none}
  .mr-v24-expertise-index__chips::-webkit-scrollbar{display:none}
  .mr-v24-expertise-index__chips a{flex:0 0 auto;min-height:36px}
  .mr-v23-map-shell.is-fullscreen .mr-v23-map-stage{min-height:calc(100dvh - 164px)!important}
  .mr-v23-map-shell.is-fullscreen .mr-v23-map-panel{
    left:10px!important;right:10px!important;bottom:calc(78px + env(safe-area-inset-bottom))!important;width:auto!important;
    border-radius:16px!important;background:rgba(2,13,23,.94)!important;
  }
}

/* Cache-busting identity is intentionally SVG-first, but raster fallbacks remain for OS icons. */
@media (prefers-reduced-motion:reduce){
  .mr-v24-expertise-index__chips a{transition:none!important}
}