/* =========================================================
   1) Root Variables | المتغيرات الأساسية
========================================================= */
:root{
  /* Colors */
  --bg-0:#070a0f;
  --bg-1:#0b0f14;

  --glass-1:rgba(10,12,16,.58);
  --glass-2:rgba(255,255,255,.05);
  --glass-soft:rgba(255,255,255,.04);

  --stroke:rgba(255,255,255,.14);
  --stroke-soft:rgba(255,255,255,.10);
  --stroke-strong:rgba(255,255,255,.18);

  --text:rgba(255,255,255,.92);
  --text-soft:rgba(255,255,255,.72);
  --text-muted:rgba(255,255,255,.65);
  --text-faint:rgba(255,255,255,.55);

  --focus:rgba(140,120,255,.55);
  --accent-purple:rgba(140,120,255,.18);
  --accent-pink:rgba(255,90,180,.18);
  --accent-cyan:rgba(0,210,255,.12);

  /* Radius */
  --radius-xl:28px;
  --radius-lg:22px;
  --radius-md:18px;
  --radius-sm:14px;
  --radius-xs:12px;
  --radius-pill:999px;

  /* Shadows */
  --shadow-main:0 18px 60px rgba(0,0,0,.55);
  --shadow-soft:0 10px 24px rgba(0,0,0,.18);
  --shadow-card:0 18px 60px rgba(0,0,0,.48);
  --shadow-avatar:0 14px 34px rgba(0,0,0,.38);

  /* Spacing */
  --space-1:8px;
  --space-2:12px;
  --space-3:16px;
  --space-4:20px;
  --space-5:24px;
  --space-6:32px;
  --space-7:40px;

  /* Layout */
  --content-max:1240px;
  --profile-w:420px;
  --profile-offset:32px;
  --actions-w:190px;

  --cover-h-desktop:270px;
  --cover-h-mobile:220px;

  --avatar-size-desktop:118px;
  --avatar-size-mobile:96px;

  --panel-padding-x:22px;
  --panel-padding-y:22px;

  --mobile-topbar-h:150px;
  --mobile-bottombar-h:86px;

  /* Motion */
  --ease:.18s ease;
}

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

/* =========================================================
   2) Reset | التهيئة العامة
========================================================= */
*,
*::before,
*::after{
  box-sizing:border-box;
}

body{
  margin:0;
  font-family:"IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color:var(--text);
  background:
    radial-gradient(900px 500px at 80% 20%, rgba(140,120,255,.15), transparent 60%),
    radial-gradient(700px 500px at 10% 10%, var(--accent-cyan), transparent 55%),
    linear-gradient(180deg, var(--bg-0), var(--bg-1));
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img,
video{
  display:block;
  max-width:100%;
}

a,
a:visited{
  color:inherit;
  text-decoration:none;
}

button,
input,
select,
textarea{
  font:inherit;
}

/* =========================================================
   3) Shared Utilities | أدوات مشتركة
========================================================= */
.wrap{
  width:min(var(--content-max), 100%);
  margin-inline:auto;
  padding-inline:20px;
}

.card,
.profileHeader{
  border-radius:var(--radius-lg);
  background:linear-gradient(180deg, var(--glass-1), var(--glass-2));
  border:1px solid var(--stroke);
  box-shadow:var(--shadow-main);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}

.linkItem:focus-visible,
.primaryBtn:focus-visible,
.ghostBtn:focus-visible,
.navBtn:focus-visible,
.dockItem:focus-visible,
.langMenu a:focus-visible,
.videoSoundBtn:focus-visible,
.videoExpandBtn:focus-visible,
.videoCloseBtn:focus-visible{
  outline:2px solid var(--focus);
  outline-offset:3px;
}

/* =========================================================
   4) Profile Panel | بطاقة البروفايل
========================================================= */
.wrap-man{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:16px;
}

.profileHeader{
  position:relative;
  overflow:hidden;
  border-radius:26px;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:var(--shadow-card);
}

.cover{
  position:relative;
  height:var(--cover-h-desktop);
  background:
    linear-gradient(180deg, rgba(0,0,0,.16), rgba(0,0,0,.78)),
    url("/assets/img/img-back.jpg") center center / cover no-repeat;
}

.cover::after{
  content:"";
  position:absolute;
  inset-inline:0;
  bottom:0;
  height:120px;
  background:linear-gradient(180deg, rgba(6,10,16,0), rgba(6,10,16,.92));
  pointer-events:none;
}

.headerBody{
  position:relative;
  padding:0 var(--panel-padding-x) var(--panel-padding-y);
}

.avatar{
  position:absolute;
  top:calc(var(--avatar-size-desktop) * -0.42);
  right:22px;
  z-index:3;
  width:var(--avatar-size-desktop);
  height:var(--avatar-size-desktop);
  overflow:hidden;
  border-radius:30px;
  border:3px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);
  box-shadow:var(--shadow-avatar);
}

.avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.nameLine{
  min-width:0;
  padding-top:76px;
}

.nameTitle{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:12px;
  margin:0;
  min-width:0;
}

.nameAr{
  margin:0;
  min-width:0;
  font-size:clamp(24px, 2vw, 34px);
  line-height:1.25;
  font-weight:800;
  letter-spacing:.2px;
  word-break:keep-all;
}

.divider{
  flex:0 0 auto;
  width:1px;
  height:22px;
  background:rgba(255,255,255,.35);
}

.nameEn{
  font-size:clamp(13px, 1vw, 15px);
  line-height:1.3;
  font-weight:700;
  letter-spacing:2.4px;
  text-transform:uppercase;
  opacity:.7;
}

.welcome{
  margin:14px 0 0;
  font-size:clamp(14px, 1vw, 16px);
  line-height:1.8;
  font-weight:700;
  text-align:right;
  color:rgba(255,255,255,.9);
}

.bio{
  margin:14px 0 0;
  max-width:100%;
  font-size:clamp(14px, 1.06vw, 16px);
  line-height:1.8;
  text-align:right;
  color:var(--text-soft);
  overflow-wrap:break-word;
  text-wrap:pretty;
}

.bioEn{
  display:block;
  margin-top:10px;
  font-size:clamp(12px, .95vw, 14px);
  line-height:1.85;
  color:var(--text-faint);
  direction:ltr;
  text-align:left;
  unicode-bidi:isolate;
  overflow-wrap:anywhere;
  text-wrap:pretty;
}

/* =========================================================
   5) Stats | الإحصائيات
========================================================= */
.profileStats{
  margin-top:18px;
}

.statsGrid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:14px;
  width:100%;
}

.statBox{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-width:0;
  min-height:118px;
  padding:16px 12px;
  text-align:center;
  overflow:hidden;
  border-radius:22px;
  border:1px solid var(--stroke);
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.03));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.02),
    var(--shadow-soft);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  transition:transform .2s ease, background var(--ease), border-color var(--ease);
}

.statBox:hover{
  transform:translateY(-3px);
}

.statLabel{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  min-height:34px;
  margin:0;
  max-width:100%;
  line-height:1.45;
  font-weight:700;
  color:rgba(255,255,255,.68);
  white-space:normal;
  overflow-wrap:break-word;
}

.statAr{
  font-size:11px;
  opacity:.78;
}

.statEn{
  font-size:10px;
  opacity:.56;
  letter-spacing:.2px;
}

.statValue{
  margin-top:8px;
  font-size:30px;
  line-height:1;
  font-weight:900;
  letter-spacing:.2px;
  color:#fff;
  white-space:nowrap;
}

/* =========================================================
   6) Sponsors | الشعارات
========================================================= */
.profileSponsors{
  margin-top:0;
}

.marqueeWrap{
  position:relative;
  width:100%;
  min-height:94px;
  overflow:hidden;
  direction:ltr;
  padding:12px 0;
  border-radius:22px;
  border:1px solid var(--stroke-soft);
  background:
    radial-gradient(900px 280px at 15% 40%, rgba(255,90,180,.14), transparent 55%),
    radial-gradient(900px 280px at 85% 60%, rgba(140,120,255,.14), transparent 55%),
    rgba(255,255,255,.03);
}

.marqueeTrack{
  display:flex;
  align-items:center;
  gap:34px;
  width:max-content;
  flex-wrap:nowrap;
  will-change:transform;
  transform:translate3d(0,0,0);
}

.logoBox{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  width:150px;
  height:54px;
}

.logoBox img{
  max-width:88%;
  max-height:78%;
  object-fit:contain;
  opacity:.95;
  filter:
    brightness(0) invert(1)
    drop-shadow(0 0 10px rgba(255,255,255,.05))
    drop-shadow(0 12px 22px rgba(0,0,0,.35));
}

/* =========================================================
   7) Hero Buttons | الأزرار
========================================================= */
.heroActions{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
  margin-top:16px;
}

.primaryBtn,
.ghostBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:10px 16px;
  border-radius:14px;
  font-size:13px;
  font-weight:800;
  border:1px solid rgba(255,255,255,.14);
  transition:
    transform var(--ease),
    background var(--ease),
    border-color var(--ease),
    box-shadow var(--ease);
}

.primaryBtn{
  background:
    radial-gradient(800px 260px at 15% 30%, rgba(255,90,180,.18), transparent 55%),
    radial-gradient(800px 260px at 85% 70%, rgba(140,120,255,.18), transparent 55%),
    rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.18);
}

.ghostBtn{
  background:rgba(10,12,16,.26);
}

.primaryBtn:hover,
.ghostBtn:hover{
  transform:translateY(-2px);
  background:rgba(255,255,255,.09);
  border-color:rgba(255,255,255,.22);
}

/* =========================================================
   8) Floating Dock | الشريط العائم
========================================================= */
.wrap-icon{
  position:fixed;
  left:50%;
  bottom:18px;
  z-index:1200;
  width:min(94vw, 920px);
  transform:translateX(-50%);
  pointer-events:none;
}

.dock{
  pointer-events:auto;
  display:flex;
  align-items:stretch;
  justify-content:center;
  gap:6px;
  padding:8px;
  border-radius:24px;
  background:linear-gradient(180deg, rgba(15,18,24,.92), rgba(8,10,14,.92));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:
    0 18px 44px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.03);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  width:fit-content;
  margin-inline:auto;
}

.dockItem{
  position:relative;
  appearance:none;
  -webkit-appearance:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-width:88px;
  min-height:74px;
  padding:12px 14px;
  border:0;
  border-radius:22px;
  background:transparent;
  color:var(--text);
  cursor:pointer;
  transition:
    transform var(--ease),
    background var(--ease),
    box-shadow var(--ease),
    color var(--ease);
}

.dockItem:hover{
  transform:translateY(-2px);
  background:rgba(255,255,255,.06);
}

.dockItem.is-active{
  color:#fff;
  background:
    radial-gradient(160px 80px at 50% 0%, rgba(140,120,255,.20), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.05));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.11),
    0 10px 30px rgba(140,120,255,.12);
}

.dockItem.is-active::after{
  content:"";
  position:absolute;
  bottom:8px;
  width:26px;
  height:3px;
  border-radius:var(--radius-pill);
  background:linear-gradient(90deg, rgba(255,90,180,.9), rgba(140,120,255,.95));
  box-shadow:0 0 16px rgba(140,120,255,.35);
}

.dockIcon{
  display:grid;
  place-items:center;
  width:22px;
  height:22px;
  opacity:.96;
}

.dockIcon svg{
  width:22px;
  height:22px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:1.85;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.dockText{
  font-size:12px;
  line-height:1;
  font-weight:800;
  letter-spacing:.15px;
  white-space:nowrap;
  opacity:.9;
}

/* =========================================================
   9) Language Menu | قائمة اللغات
========================================================= */
.dockLangWrap{
  position:relative;
  display:flex;
}

.dockLangBtn{
  font-family:inherit;
}

.langMenu{
  position:absolute;
  bottom:calc(100% + 10px);
  left:50%;
  min-width:180px;
  padding:8px;
  border-radius:18px;
  background:linear-gradient(180deg, rgba(16,18,24,.96), rgba(10,12,16,.94));
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 18px 44px rgba(0,0,0,.42);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateX(-50%) translateY(8px);
  transition:opacity var(--ease), transform var(--ease), visibility var(--ease);
}

.langMenu.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}

.langMenu a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:11px 12px;
  border-radius:12px;
  font-size:13px;
  font-weight:700;
  color:var(--text);
  transition:background .16s ease, transform .16s ease;
}

.langMenu a:hover{
  background:rgba(255,255,255,.07);
  transform:translateY(-1px);
}

/* =========================================================
   10) General Content | المحتوى العام
========================================================= */
.card{
  margin-top:18px;
  padding:20px;
}

.block{
  padding:2px 0;
}

.block + .block{
  margin-top:18px;
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,.10);
}

.sectionTitle{
  margin:0 0 10px;
  font-size:clamp(16px, 4vw, 22px);
  font-weight:800;
  letter-spacing:.2px;
}

.smallTitle{
  font-size:20px;
  font-weight:600;
  letter-spacing:.5px;
  line-height:1.5;
}

.smallTitle .sectionSub{
  display:block;
  margin-top:4px;
  font-size:12px;
  font-weight:400;
  letter-spacing:2px;
  text-transform:uppercase;
  opacity:.6;
}

.sectionLead{
  margin:0 0 12px;
  font-size:13px;
  line-height:1.8;
  color:var(--text-soft);
}

/* =========================================================
   11) Journey Video | فيديو الرحلة
========================================================= */
.journeyVideoWrap{
  position:relative;
  width:100%;
  overflow:hidden;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  background:#000;
  line-height:0;
}

.journeyVideo{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
  background:#000;
  cursor:pointer;
}

.videoControls{
  position:absolute;
  right:12px;
  bottom:12px;
  left:12px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:10px;
  z-index:3;
  pointer-events:none;
}

.videoControlsGroup{
  display:flex;
  align-items:center;
  gap:8px;
  pointer-events:auto;
}

.videoSoundBtn,
.videoExpandBtn{
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  padding:0;
  border:1px solid rgba(255,255,255,.10);
  border-radius:50%;
  background:rgba(0,0,0,.42);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:
    0 8px 20px rgba(0,0,0,.22),
    inset 0 0 0 1px rgba(255,255,255,.08);
  cursor:pointer;
}

.videoSoundBtn:hover,
.videoExpandBtn:hover{
  transform:translateY(-1px);
  background:rgba(0,0,0,.58);
}

.videoSoundBtn svg,
.videoExpandBtn svg{
  width:18px;
  height:18px;
  display:block;
  fill:none;
  stroke:#fff;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.videoPlayBtn{
  position:absolute;
  top:50%;
  left:50%;
  z-index:4;
  display:flex;
  align-items:center;
  justify-content:center;
  width:58px;
  height:58px;
  padding:0;
  border:0;
  border-radius:50%;
  transform:translate(-50%, -50%);
  background:rgba(0,0,0,.55);
  opacity:0;
  pointer-events:none;
}

.videoBtnIcon{
  font-size:20px;
  line-height:1;
  transform:translateX(1px);
  color:#fff;
}
.socialGrid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:20px;
}
.socialWorks{
  margin-top:0;
}

.socialGrid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}

.socialCard{
  display:block;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  border-radius:22px;
  background:rgba(255,255,255,.04);
  text-decoration:none;
  color:inherit;
  transition:transform .25s ease, border-color .25s ease, background .25s ease;
}

.socialCard:hover{
  transform:translateY(-4px);
  border-color:rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);
}

.socialThumb{
  aspect-ratio:16/10;
  background:rgba(255,255,255,.05);
  overflow:hidden;
}

.socialThumb img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

.socialInfo{
  padding:16px 16px 18px;
}

.socialPlatform{
  display:inline-block;
  margin-bottom:8px;
  font-size:12px;
  color:rgba(255,255,255,.62);
  letter-spacing:.4px;
}

.socialTitle{
  margin:0 0 10px;
  font-size:18px;
  line-height:1.5;
  color:#fff;
}

.socialOpen{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:14px;
  color:rgba(255,255,255,.78);
}

@media (max-width: 760px){
  .socialGrid{
    grid-template-columns:1fr;
  }
}
.socialGrid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:20px;
}

.socialCard{
  border-radius:18px;
  overflow:hidden;
  background:#000;
}

.socialCard iframe{
  width:100%;
  height:420px;
  border:0;
}

@media (max-width:760px){
  .socialGrid{
    grid-template-columns:1fr;
  }
}
.socialWorks{
  margin-top:0;
}

.socialGrid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}

.socialCard{
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  border-radius:22px;
  background:rgba(255,255,255,.04);
  backdrop-filter:blur(10px);
}

.socialThumb{
  display:block;
  aspect-ratio:16/10;
  overflow:hidden;
  background:rgba(255,255,255,.05);
}

.socialThumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.socialInfo{
  padding:16px;
}

.socialPlatform{
  display:inline-block;
  margin-bottom:8px;
  font-size:12px;
  color:rgba(255,255,255,.65);
}

.socialTitle{
  margin:0 0 12px;
  font-size:18px;
  line-height:1.6;
  color:#fff;
}

.socialOpen{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  padding:0 14px;
  border-radius:999px;
  text-decoration:none;
  color:#fff;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.10);
}

.socialOpen:hover{
  background:rgba(255,255,255,.12);
}

@media (max-width:760px){
  .socialGrid{
    grid-template-columns:1fr;
  }
}
.socialCard{
  border-radius:16px;
  overflow:hidden;
  background:#000;
}

.socialCard iframe{
  width:100%;
  height:420px;
  border:0;
}
.journeyVideoWrap.is-paused .videoPlayBtn{
  opacity:1;
  pointer-events:auto;
}

.soundIcon{
  position:absolute;
  width:15px;
  height:15px;
  transition:opacity .18s ease, transform .18s ease;
}

.videoSoundBtn{
  position:relative;
}

.videoSoundBtn .soundOn{
  opacity:0;
  transform:scale(.88);
}

.videoSoundBtn .soundOff{
  opacity:1;
  transform:scale(1);
}

.videoSoundBtn.is-unmuted .soundOn{
  opacity:1;
  transform:scale(1);
}

.videoSoundBtn.is-unmuted .soundOff{
  opacity:0;
  transform:scale(.88);
}

/* =========================================================
   12) Story / Services / Contact
========================================================= */
.storyCta{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
  margin-top:10px;
}

.hint{
  font-size:12px;
  opacity:.55;
}

.servicesGrid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:12px;
}

.serviceCard{
  padding:16px;
  border-radius:18px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);
  transition:transform var(--ease), border-color var(--ease), background var(--ease);
}

.serviceCard:hover{
  transform:translateY(-2px);
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.18);
}

.serviceTitle{
  margin:0 0 8px;
  font-size:14px;
  font-weight:900;
  letter-spacing:.2px;
}

.serviceDesc{
  margin:0;
  font-size:13px;
  line-height:1.8;
  color:var(--text-soft);
}

.contactGrid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}

/* =========================================================
   13) Links | الروابط
========================================================= */
.links{
  display:grid;
  gap:12px;
}

.linkItem{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  border-radius:16px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);
  transition:transform .2s ease, background .2s ease, border-color .2s ease;
}

.linkItem:hover{
  transform:translateY(-2px);
  background:rgba(255,255,255,.09);
  border-color:rgba(255,255,255,.18);
}

.platform{
  display:flex;
  flex-direction:column;
  min-width:0;
}

.platform b{
  font-size:14px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.platform span{
  font-size:12px;
  opacity:.6;
}

.go{
  flex:0 0 auto;
  font-size:12px;
  opacity:.75;
}

/* =========================================================
   14) Works | الأعمال
========================================================= */
.worksSection{
  margin-top:18px;
}

.worksViewer{
  position:relative;
  overflow:hidden;
  border-radius:16px;
  background:transparent;
  border:none;
  box-shadow:none;
}

.worksMedia{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:auto;
  background:transparent;
  overflow:hidden;
}

.worksMedia img,
.worksMedia video{
  display:block;
  width:100%;
  height:auto;
  max-height:78vh;
  object-fit:contain;
  background:transparent;
  border:none;
  box-shadow:none;
}

.worksMedia img{
  cursor:zoom-in;
}

.worksMedia video{
  cursor:pointer;
}

.worksOverlay{
  position:absolute;
  right:12px;
  bottom:12px;
  left:12px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:10px;
  z-index:3;
  pointer-events:none;
}

.worksOverlayGroup{
  display:flex;
  align-items:center;
  gap:8px;
  pointer-events:auto;
}

.mediaBtn{
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  border:0;
  border-radius:999px;
  color:#fff;
  background:rgba(0,0,0,.42);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:
    0 8px 20px rgba(0,0,0,.22),
    inset 0 0 0 1px rgba(255,255,255,.08);
  transition:transform .18s ease, background .18s ease, opacity .18s ease;
}

.mediaBtn:hover{
  transform:translateY(-1px);
  background:rgba(0,0,0,.58);
}

.mediaBtn svg{
  width:15px;
  height:15px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.mediaPlayBtn{
  position:absolute;
  top:50%;
  left:50%;
  z-index:4;
  display:grid;
  place-items:center;
  width:58px;
  height:58px;
  border:0;
  border-radius:50%;
  color:#fff;
  background:rgba(0,0,0,.36);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  transform:translate(-50%,-50%);
  opacity:0;
  pointer-events:none;
  transition:transform .18s ease, background .18s ease, opacity .18s ease;
}

.mediaPlayBtn span{
  font-size:22px;
  line-height:1;
  color:#fff;
  transform:translateX(1px);
}

.worksMedia.is-paused .mediaPlayBtn{
  opacity:1;
  pointer-events:auto;
}

.soundToggle{
  position:relative;
}

.soundToggle .soundOn{
  opacity:0;
  transform:scale(.88);
}

.soundToggle .soundOff{
  opacity:1;
  transform:scale(1);
}

.soundToggle.is-unmuted .soundOn{
  opacity:1;
  transform:scale(1);
}

.soundToggle.is-unmuted .soundOff{
  opacity:0;
  transform:scale(.88);
}

.worksNav{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px;
  pointer-events:none;
  z-index:5;
}

.navBtn{
  pointer-events:auto;
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  padding:0;
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
  background:rgba(10,12,16,.32);
  color:#fff;
  cursor:pointer;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  transition:transform .18s ease, background .18s ease, border-color .18s ease;
}

.navBtn:hover{
  transform:translateY(-1px);
  background:rgba(10,12,16,.44);
  border-color:rgba(255,255,255,.2);
}

.worksDots{
  position:absolute;
  left:12px;
  right:12px;
  bottom:12px;
  display:flex;
  justify-content:center;
  gap:8px;
  z-index:6;
  pointer-events:none;
}

.dot{
  width:8px;
  height:8px;
  border-radius:999px;
  background:rgba(255,255,255,.22);
  border:1px solid rgba(255,255,255,.10);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

.dot.active{
  background:rgba(255,255,255,.88);
  box-shadow:0 0 18px rgba(255,90,180,.18);
}

.imageLightbox{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(0,0,0,.94);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  z-index:9999;
  transition:opacity .18s ease, visibility .18s ease;
}

.imageLightbox.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.imageLightbox img{
  display:block;
  width:auto;
  height:auto;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  border-radius:12px;
  background:#000;
}

.imageLightboxClose{
  position:absolute;
  top:16px;
  right:16px;
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  border:0;
  border-radius:999px;
  background:rgba(0,0,0,.52);
  color:#fff;
  cursor:pointer;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

.worksMeta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  font-size:12px;
  opacity:.7;
}

.worksMeta b{
  font-weight:800;
  opacity:.95;
}

/* =========================================================
   15) Footer | الفوتر
========================================================= */
.footer{
  margin-top:20px;
  font-size:12px;
  text-align:center;
  opacity:.55;
}

/* =========================================================
   16) Desktop Layout | الشاشات الكبيرة
========================================================= */
@media (min-width:900px){
  .wrap-man{
    position:fixed;
    top:50%;
    left:var(--profile-offset);
    z-index:900;
    width:min(var(--profile-w), calc(100vw - 64px));
    max-height:calc(100vh - 64px);
    padding:0;
    overflow:auto;
    transform:translateY(-50%);
    scrollbar-width:none;
  }
    .wrap-icon{
    left:auto;
    right:24px;
    width:calc(100vw - var(--profile-w) - 96px);
    max-width:var(--content-max);
    transform:none;
  }
  .wrap-man::-webkit-scrollbar{
    display:none;
  }

  .wrap{
    width:min(var(--content-max), calc(100vw - var(--profile-w) - 96px));
    margin-left:calc(var(--profile-w) + 64px);
    margin-right:auto;
    padding:32px 24px 120px;
  }
}

@media (min-width:1400px){
  .wrap{
    width:min(1240px, calc(100vw - var(--profile-w) - var(--actions-w) - 104px));
    margin-left:calc(var(--profile-w) + 44px);
    margin-right:calc(var(--actions-w) + 44px);
  }

  .wrap-icon{
    left:auto;
    right:calc(var(--actions-w) + 44px);
    width:min(1240px, calc(100vw - var(--profile-w) - var(--actions-w) - 104px));
    max-width:none;
    transform:none;
  }
}
.skillsTags a{
  display:inline-block;
  padding:6px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  font-size:13px;
  text-decoration:none;
  color:inherit;
  transition:.25s;
}

.skillsTags a:hover{
  background:rgba(255,255,255,.12);
  transform:translateY(-1px);
}
/* =========================================================
   17) Tablet | التابلت
========================================================= */
@media (max-width:1024px){
  .servicesGrid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .statsGrid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .statBox{
    min-height:108px;
  }

  .statValue{
    font-size:28px;
  }
}

/* =========================================================
   18) Mobile + Small Tablet | الجوال والتابلت الصغير
========================================================= */
@media (max-width:899px){
  .wrap-man{
    position:relative;
    top:auto;
    left:auto;
    right:auto;
    z-index:auto;
    width:100%;
    padding:12px 12px 0;
    transform:none;
  }

  .wrap{
    width:100%;
    margin:0;
    padding:
      calc(var(--mobile-topbar-h) + var(--space-3))
      12px
      calc(var(--mobile-bottombar-h) + var(--space-4));
  }

  .cover{
    height:var(--cover-h-mobile);
  }

  .headerBody{
    padding:0 18px 20px;
  }

  .avatar{
    top:calc(var(--avatar-size-mobile) * -0.38);
    right:18px;
    width:var(--avatar-size-mobile);
    height:var(--avatar-size-mobile);
    border-radius:24px;
  }

  .nameLine{
    padding-top:64px;
  }

  .nameTitle{
    gap:10px;
  }

  .nameAr{
    font-size:clamp(20px, 6vw, 28px);
  }

  .nameEn{
    font-size:12px;
    letter-spacing:1.4px;
  }

  .welcome{
    font-size:14px;
    line-height:1.75;
  }

  .bio{
    font-size:14px;
    line-height:1.95;
  }

  .bioEn{
    font-size:12.5px;
    line-height:1.75;
  }

  .heroActions{
    justify-content:center;
    margin-top:0;
  }

  .primaryBtn,
  .ghostBtn{
    flex:1 1 0;
    min-height:52px;
    padding:12px 14px;
    border-radius:16px;
  }

  .wrap-icon{
    bottom:10px;
    width:min(92vw, 520px);
  }

  .dock{
    gap:4px;
    padding:6px;
    border-radius:20px;
  }

  .dockItem{
    min-width:52px;
    min-height:54px;
    padding:8px 6px;
    border-radius:16px;
    gap:5px;
  }

  .dockIcon,
  .dockIcon svg{
    width:18px;
    height:18px;
  }

  .dockText{
    font-size:9px;
    line-height:1;
  }

  .dockItem.is-active::after{
    bottom:6px;
    width:20px;
    height:2.5px;
  }
}

/* =========================================================
   19) Small Mobile | الجوال الصغير
========================================================= */
@media (max-width:768px){
  .navBtn{
    display:flex;
    align-items:center;
    justify-content:center;
    width:32px;
    height:32px;
    padding:0;
    border-radius:50%;
    background:rgba(0,0,0,.30);
    border:1px solid rgba(255,255,255,.10);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
  }

  .navBtn svg{
    width:14px;
    height:14px;
    display:block;
  }

  .mediaBtn{
    display:flex;
    align-items:center;
    justify-content:center;
    width:32px;
    height:32px;
    padding:0;
    border-radius:50%;
    background:rgba(0,0,0,.30);
    border:1px solid rgba(255,255,255,.10);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    box-shadow:none;
  }

  .mediaBtn svg,
  .soundIcon{
    width:14px;
    height:14px;
    display:block;
  }

  .mediaBtn svg,
  .navBtn svg{
    transform:none;
  }

  .mediaPlayBtn{
    width:42px;
    height:42px;
    background:rgba(0,0,0,.26);
    box-shadow:none;
  }

  .mediaPlayBtn span{
    font-size:15px;
  }

  .worksNav{
    padding:8px;
  }

  .worksOverlay{
    right:8px;
    left:8px;
    bottom:8px;
  }

  .worksOverlayGroup{
    gap:6px;
  }

  .worksDots{
    bottom:8px;
    gap:6px;
  }

  .dot{
    width:6px;
    height:6px;
  }
}

@media (max-width:640px){
  .wrap-man{
    gap:14px;
  }

  .headerBody{
    padding:0 16px 18px;
  }

  .avatar{
    right:16px;
  }

  .nameLine{
    padding-top:60px;
  }

  .nameTitle{
    display:grid;
    grid-template-columns:1fr;
    gap:6px;
  }

  .divider{
    display:none;
  }

  .nameEn{
    order:-1;
    font-size:11.5px;
    letter-spacing:1.6px;
    opacity:.72;
  }

  .nameAr{
    font-size:clamp(19px, 7vw, 25px);
    line-height:1.35;
  }

  .welcome{
    margin-top:10px;
    font-size:14px;
  }

  .bio{
    margin-top:12px;
    font-size:13.5px;
    line-height:1.9;
  }

  .bioEn{
    margin-top:8px;
    font-size:12px;
  }

  .statsGrid{
    gap:12px;
  }

  .statBox{
    min-height:98px;
    padding:14px 10px;
    border-radius:18px;
  }

  .statLabel{
    line-height:1.35;
  }

  .statAr{
    font-size:10.5px;
  }

  .statEn{
    font-size:9.5px;
  }

  .statValue{
    margin-top:6px;
    font-size:24px;
  }

  .marqueeWrap{
    min-height:82px;
    border-radius:20px;
  }

  .logoBox{
    width:120px;
    height:46px;
  }

  .videoSoundBtn,
  .videoExpandBtn{
    width:32px;
    height:32px;
    padding:0;
    border-radius:50%;
    background:rgba(0,0,0,.30);
    border:1px solid rgba(255,255,255,.10);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    box-shadow:none;
  }

  .videoSoundBtn svg,
  .videoExpandBtn svg,
  .soundIcon{
    width:14px;
    height:14px;
    display:block;
  }

  .videoSoundBtn svg,
  .videoExpandBtn svg{
    transform:none;
  }
}

/* =========================================================
   20) Very Small Mobile | صغير جدًا
========================================================= */
@media (max-width:390px){
  .statAr{
    font-size:10px;
  }

  .statEn{
    font-size:9px;
  }

  .statValue{
    font-size:22px;
  }
}
/* =========================
   Skills Tags
========================= */
#skills{
  padding-top: 26px;
}

.skillsTags{
  display: flex;
  flex-wrap: wrap;
  gap: 12px 10px;              /* مسافة رأسية وأفقية واضحة */
  margin-top: 18px;
  align-items: center;
}

.skillsTags span{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 44px;
  padding: 10px 18px;
  max-width: 100%;

  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);

  background: linear-gradient(
    180deg,
    rgba(255,255,255,.045) 0%,
    rgba(255,255,255,.02) 100%
  );

  color: rgba(255,255,255,.82);
  font-size: 15px;
  line-height: 1.2;
  white-space: nowrap;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 8px 20px rgba(0,0,0,.16);

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  transition:
    transform .22s ease,
    border-color .22s ease,
    background .22s ease,
    color .22s ease;
}

.skillsTags span:hover{
  transform: translateY(-2px);
  border-color: rgba(190,140,255,.28);
  background: linear-gradient(
    180deg,
    rgba(160,120,255,.11) 0%,
    rgba(255,255,255,.03) 100%
  );
  color: rgba(255,255,255,.96);
}

/* =========================
   Mobile تحسين الجوال
========================= */
@media (max-width: 640px){
    .skillsTags{
    display:flex;
    flex-wrap:wrap;
    gap:10px 8px;          /* مسافة بين التاقات */
    justify-content:flex-start;
  }

  .skillsTags a{
    min-height:40px;
    padding:8px 14px;
    font-size:14px;
    border-radius:999px;
  }



  .skillsTags span{
    min-height: 40px;
    padding: 9px 14px;
    font-size: 14px;
  }
}
/* =========================================================
   21) Reduce Motion | تقليل الحركة
========================================================= */
@media (prefers-reduced-motion:reduce){
  html{
    scroll-behavior:auto;
  }

  *,
  *::before,
  *::after{
    animation:none !important;
    transition:none !important;
  }

  .linkItem:hover,
  .primaryBtn:hover,
  .ghostBtn:hover,
  .navBtn:hover,
  .dockItem:hover,
  .serviceCard:hover,
  .statBox:hover,
  .videoSoundBtn:hover,
  .videoExpandBtn:hover,
  .videoPlayBtn:hover,
  .videoCloseBtn:hover{
    transform:none;
  }
}