/* =========================================================
   Yazan Elias — personal portfolio (mobile-first, light navy/gold)
   ========================================================= */
@font-face { font-family: "Thmanyah Serif"; src: url("../fonts/thmanyah-serif-bold.otf") format("opentype"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "Alexandria"; src: url("../fonts/alexandria.woff") format("woff"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Plex Arabic"; src: url("../fonts/plex-400.woff") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plex Arabic"; src: url("../fonts/plex-500.woff") format("woff"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Plex Arabic"; src: url("../fonts/plex-700.woff") format("woff"); font-weight: 700; font-display: swap; }

:root {
  --navy: #14254d;
  --title: #14254d;
  --navy-2: #0c1733;
  --navy-3: #2c4583;
  --navy-soft: #e9edf6;
  --gold: #b88a3e;
  --gold-2: #9a7130;
  --gold-3: #d8b06a;
  --gold-soft: #f6efe2;
  --ink: #131a2c;
  --ink-2: #454c5f;
  --ink-3: #7a8091;
  --bg: #f6f5f1;
  --white: #ffffff;
  --line: #e7e4dc;
  --shadow: 0 10px 28px -14px rgba(12, 23, 51, .2);
  --shadow-lg: 0 26px 50px -24px rgba(12, 23, 51, .38);
  --grad: linear-gradient(135deg, var(--navy-3) 0%, var(--navy) 55%, var(--navy-2) 100%);
  --grad-gold: linear-gradient(135deg, var(--gold-3), var(--gold) 55%, var(--gold-2));
  --r: 20px;
  --gutter: 18px;
  --display: "Thmanyah Serif", "Alexandria", "Plex Arabic", serif;
  --sans-display: "Alexandria", "Plex Arabic", system-ui, sans-serif;
  --body: "Plex Arabic", "Alexandria", system-ui, sans-serif;
  --top: 64px;
  color-scheme: light;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--top) + 12px); -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg); color: var(--ink); font-family: var(--body);
  font-size: 16px; line-height: 1.85; overflow-x: hidden;
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
  padding-bottom: env(safe-area-inset-bottom);
}
html[lang="en"] body { line-height: 1.7; }
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--navy); color: #fff; }
.wrap { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: var(--gutter); }
.ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }
.ic { width: 22px; height: 22px; flex: none; }
:focus-visible { outline: 3px solid rgba(184,138,62,.55); outline-offset: 3px; border-radius: 8px; }
.gold { color: var(--gold); }
.navy { color: var(--title); }

/* ---------- Loader & progress ---------- */
.loader { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; background: var(--bg); transition: opacity .6s .1s, visibility .6s .1s; }
.loader.done { opacity: 0; visibility: hidden; }
.loader-mark { display: grid; justify-items: center; gap: 14px; }
.loader-mark b { font-family: var(--display); font-weight: 800; font-size: 2rem; color: var(--title); letter-spacing: -.01em; animation: rise .9s cubic-bezier(.2,.7,.2,1) both; }
.loader-mark span { width: 120px; height: 2px; background: var(--line); overflow: hidden; border-radius: 2px; }
.loader-mark span::after { content: ""; display: block; height: 100%; width: 40%; background: var(--gold); animation: load 1.1s ease-in-out infinite; }
@keyframes load { from { transform: translateX(260%); } to { transform: translateX(-120%); } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
.progress { position: fixed; top: 0; inset-inline-start: 0; height: 3px; width: 0; background: var(--grad-gold); z-index: 90; }

/* ---------- Top bar ---------- */
.topbar { position: fixed; inset-inline: 0; top: 0; z-index: 80; height: var(--top); transition: background .35s, box-shadow .35s; }
.topbar.solid { background: rgba(246,245,241,.86); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); box-shadow: 0 1px 0 var(--line); }
.topbar .wrap { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 800; font-size: 1.12rem; color: var(--title); white-space: nowrap; flex-shrink: 0; }
.brand i { width: 34px; height: 34px; border-radius: 11px; background: var(--grad); display: grid; place-items: center; color: var(--gold-3); font-style: normal; font-size: 1rem; box-shadow: 0 6px 14px -6px rgba(12,23,51,.5); flex-shrink: 0; }
.top-cv-btn { height: 38px; padding: 0 14px; border-radius: 999px; background: var(--navy); color: #fff; font-weight: 700; font-size: .85rem; display: inline-flex; align-items: center; gap: 6px; transition: all .25s; white-space: nowrap; }
.top-cv-btn .ic { width: 16px; height: 16px; }
.top-cv-btn:hover { background: var(--navy-3); transform: translateY(-1px); }
[data-theme="dark"] .top-cv-btn { background: var(--gold); color: #0c1733; }
[data-theme="dark"] .top-cv-btn:hover { background: var(--gold-3); }
@media (max-width: 999px) { .top-cv-btn { display: none; } }
.close-btn { width: 40px; height: 40px; border-radius: 12px; background: var(--bg); color: var(--ink); display: grid; place-items: center; cursor: pointer; border: 0; }
.close-btn .ic { width: 20px; height: 20px; }
.nav-desk { display: none; gap: 4px; }
.nav-desk a { padding: 8px 13px; border-radius: 999px; font-weight: 500; font-size: .93rem; color: var(--ink-2); transition: background .25s, color .25s; }
.nav-desk a:hover, .nav-desk a.active { background: var(--navy-soft); color: var(--title); }
.top-actions { display: flex; align-items: center; gap: 8px; }
.lang { height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--white); font-weight: 700; font-size: .85rem; color: var(--title); display: flex; align-items: center; gap: 6px; transition: border-color .25s, transform .25s; }
.lang:hover { border-color: var(--gold-3); }
.lang .ic { width: 17px; height: 17px; color: var(--gold); }
.menu-btn { width: 40px; height: 40px; border-radius: 12px; background: var(--navy); color: #fff; display: grid; place-items: center; }
.menu-btn .ic { width: 20px; height: 20px; }

/* mobile sheet menu */
.sheet { position: fixed; inset: 0; z-index: 120; pointer-events: none; }
.sheet .scrim, .sheet .sheet-scrim { position: absolute; inset: 0; background: rgba(12,23,51,.45); opacity: 0; transition: opacity .35s; }
.sheet .panel, .sheet .sheet-panel { position: absolute; inset-inline: 10px; top: 10px; background: var(--white); border-radius: 24px; padding: 18px; box-shadow: var(--shadow-lg); transform: translateY(-18px) scale(.98); opacity: 0; transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity .35s; }
.sheet.open { pointer-events: auto; }
.sheet.open .scrim, .sheet.open .sheet-scrim { opacity: 1; }
.sheet.open .panel, .sheet.open .sheet-panel { transform: none; opacity: 1; }
.sheet-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.sheet nav { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sheet nav a { padding: 13px 14px; border-radius: 14px; background: var(--bg); font-weight: 700; font-family: var(--display); font-size: .95rem; color: var(--title); display: flex; align-items: center; gap: 10px; }
.sheet nav a .ic { width: 18px; height: 18px; color: var(--gold); }
.close-btn { width: 40px; height: 40px; border-radius: 12px; background: var(--bg); display: grid; place-items: center; color: var(--title); }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 52px; padding: 0 22px; border-radius: 16px; font-family: var(--display); font-weight: 700; font-size: .98rem; transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s, background .3s; white-space: nowrap; }
.btn .ic { width: 19px; height: 19px; }
.btn-navy { background: var(--grad); color: #fff; box-shadow: 0 14px 26px -14px rgba(12,23,51,.75); }
.btn-gold { background: var(--grad-gold); color: #fff; box-shadow: 0 14px 26px -14px rgba(154,113,48,.8); }
.btn-ghost { background: var(--white); color: var(--title); border: 1px solid var(--line); }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: scale(.97); }

/* ---------- Reveal ---------- */
.rv { opacity: 0; transform: translateY(26px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
.rv.in { opacity: 1; transform: none; }
.no-js .rv { opacity: 1; transform: none; }

/* ---------- Hero ---------- */
.hero { position: relative; padding: calc(var(--top) + 18px) 0 40px; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; background:
  radial-gradient(60% 50% at 85% 10%, rgba(44,69,131,.12), transparent 70%),
  radial-gradient(50% 40% at 0% 70%, rgba(216,176,106,.16), transparent 70%); pointer-events: none; }
.hero .wrap { position: relative; display: grid; gap: 26px; }
.hero-photo { position: relative; border-radius: 30px; overflow: hidden; background: linear-gradient(180deg, #e3e7ef, #dfe3ec); box-shadow: var(--shadow-lg); aspect-ratio: 1100 / 1126; max-width: 470px; width: 100%; justify-self: center; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transform: scale(1.06); transition: transform 1.6s cubic-bezier(.2,.7,.2,1); }
body.loaded .hero-photo img { transform: none; }
.hero-photo .badge { position: absolute; inset-inline-start: 14px; bottom: 14px; background: rgba(255,255,255,.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: 16px; padding: 10px 14px; display: flex; align-items: center; gap: 10px; box-shadow: var(--shadow); }
.hero-photo .badge .ic { color: var(--gold); width: 26px; height: 26px; }
.hero-photo .badge b { display: block; font-family: var(--display); font-size: .92rem; color: var(--title); line-height: 1.3; }
.hero-photo .badge small { display: block; font-size: .76rem; color: var(--ink-3); line-height: 1.3; }
.hero-photo::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,.6); pointer-events: none; }
.hello { display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px 6px 6px; border-radius: 999px; background: var(--white); border: 1px solid var(--line); font-size: .84rem; font-weight: 500; color: var(--ink-2); }
html[dir="rtl"] .hello { padding: 6px 6px 6px 13px; }
.hello i { width: 24px; height: 24px; border-radius: 50%; background: var(--gold-soft); display: grid; place-items: center; font-style: normal; }
.hello i::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #2fb36d; box-shadow: 0 0 0 4px rgba(47,179,109,.18); animation: pulse 2s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 7px rgba(47,179,109,0); } }
.hero h1 { font-family: var(--display); font-weight: 900; font-size: clamp(2.5rem, 10vw, 4.6rem); line-height: 1.12; letter-spacing: -.02em; color: var(--title); margin-top: 14px; }
.hero h1 .gold { background: var(--grad-gold); -webkit-background-clip: text; background-clip: text; color: transparent; }
.roles { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; }
.roles span { padding: 7px 13px; border-radius: 12px; background: var(--white); border: 1px solid var(--line); font-size: .86rem; font-weight: 700; color: var(--title); display: inline-flex; align-items: center; gap: 7px; }
.roles span .ic { width: 16px; height: 16px; color: var(--gold); }
.hero .lead { margin-top: 16px; font-size: 1.04rem; color: var(--ink-2); max-width: 620px; }
.hero .lead b { color: var(--title); }
.hero-cta { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 10px; }
.hero-cta .btn { flex: 1 1 160px; }
.hero-text > * { opacity: 0; transform: translateY(18px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
body.loaded .hero-text > * { opacity: 1; transform: none; }
body.loaded .hero-text > *:nth-child(2) { transition-delay: .08s; }
body.loaded .hero-text > *:nth-child(3) { transition-delay: .16s; }
body.loaded .hero-text > *:nth-child(4) { transition-delay: .24s; }
body.loaded .hero-text > *:nth-child(5) { transition-delay: .32s; }
.no-js .hero-text > * { opacity: 1; transform: none; }

.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.stat { background: var(--white); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 16px 14px; position: relative; overflow: hidden; }
.stat::before { content: ""; position: absolute; inset-inline-start: 0; top: 16px; bottom: 16px; width: 3px; border-radius: 3px; background: var(--grad-gold); }
.stat b { display: block; font-family: var(--display); font-weight: 800; font-size: 1.9rem; line-height: 1.2; color: var(--title); direction: ltr; text-align: start; }
html[dir="rtl"] .stat b { text-align: right; }
.stat > span { display: block; font-size: .84rem; color: var(--ink-3); line-height: 1.5; margin-top: 2px; }

/* ---------- Sections ---------- */
.sec { padding: 64px 0; position: relative; }
.sec.white { background: var(--white); }
.sec.navy { background: var(--navy-2); color: #e9ecf3; overflow: hidden; }
.sec.navy::before { content: ""; position: absolute; inset: 0; background: radial-gradient(50% 60% at 100% 0%, rgba(216,176,106,.16), transparent 70%), radial-gradient(40% 50% at 0% 100%, rgba(44,69,131,.5), transparent 70%); pointer-events: none; }
.sec.navy .wrap { position: relative; }
.head { margin-bottom: 30px; max-width: 760px; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: .84rem; color: var(--gold); letter-spacing: .02em; }
.eyebrow::before { content: ""; width: 26px; height: 2px; border-radius: 2px; background: var(--gold); }
.title { font-family: var(--display); font-weight: 800; font-size: clamp(1.8rem, 6.4vw, 2.7rem); line-height: 1.3; color: var(--title); margin-top: 8px; letter-spacing: -.01em; }
.sec.navy .title { color: #fff; }
.sub { margin-top: 10px; color: var(--ink-2); font-size: 1.02rem; }
.sec.navy .sub { color: #b8c0d4; }

/* ---------- About ---------- */
.about-grid { display: grid; gap: 14px; }
.about-card { background: var(--white); border: 1px solid var(--line); border-radius: 24px; padding: 22px; }
.about-card p { color: var(--ink-2); font-size: 1.03rem; }
.about-card p + p { margin-top: 12px; }
.about-card p b { color: var(--title); }
.pillars { display: grid; gap: 10px; }
.pillar { display: flex; gap: 14px; align-items: flex-start; background: var(--white); border: 1px solid var(--line); border-radius: 20px; padding: 16px; transition: transform .35s, box-shadow .35s, border-color .35s; }
.pillar:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--gold-3); }
.pillar .pi { width: 46px; height: 46px; border-radius: 14px; background: var(--navy-soft); color: var(--title); display: grid; place-items: center; flex: none; }
.pillar:nth-child(2) .pi { background: var(--gold-soft); color: var(--gold-2); }
.pillar h3 { font-family: var(--display); font-size: 1.04rem; color: var(--title); line-height: 1.4; }
.pillar p { font-size: .9rem; color: var(--ink-3); line-height: 1.65; margin-top: 3px; }

/* ---------- Film feature ---------- */
.film { display: grid; gap: 16px; }
.film-hero { position: relative; border-radius: 26px; overflow: hidden; min-height: 360px; display: flex; align-items: flex-end; box-shadow: var(--shadow-lg); }
.film-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.film-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,23,51,0) 30%, rgba(12,23,51,.92) 100%); }
.film-hero .cap { position: relative; z-index: 1; padding: 22px; color: #fff; }
.film-hero .cap .tag { display: inline-flex; align-items: center; gap: 7px; background: var(--grad-gold); color: #fff; font-weight: 700; font-size: .8rem; padding: 6px 12px; border-radius: 999px; }
.film-hero .cap .tag .ic { width: 15px; height: 15px; }
.film-hero .cap h3 { font-family: var(--display); font-size: clamp(1.6rem, 6vw, 2.3rem); margin-top: 10px; line-height: 1.3; }
.film-hero .cap p { color: #d4d9e6; font-size: .96rem; margin-top: 4px; }
.film-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ff { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 18px; padding: 14px 12px; text-align: center; }
.ff b { display: block; font-family: var(--display); font-size: 1.5rem; color: var(--gold-3); line-height: 1.2; direction: ltr; }
.ff span { display: block; font-size: .78rem; color: #b8c0d4; line-height: 1.45; margin-top: 4px; }
.film-roles { display: flex; flex-wrap: wrap; gap: 8px; }
.film-roles span { padding: 7px 13px; border-radius: 12px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); font-size: .86rem; font-weight: 500; color: #e9ecf3; }
.film-text { color: #c9d0e0; font-size: 1.02rem; }
.film-text b { color: #fff; }
.film-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tile { position: relative; border-radius: 18px; overflow: hidden; background: #0a1430; cursor: zoom-in; }
.tile img, .tile video { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.tile:hover img { transform: scale(1.04); }
.tile .lbl { position: absolute; inset-inline-start: 10px; bottom: 10px; background: rgba(12,23,51,.7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #fff; font-size: .76rem; font-weight: 700; padding: 5px 10px; border-radius: 10px; }
.tile.wide { grid-column: span 2; aspect-ratio: 16/9; }
.tile.tall { aspect-ratio: 9/14; }
.tile.sq { aspect-ratio: 1; }
.tile video { cursor: default; }
.moe { border-radius: 22px; overflow: hidden; background: #0a1430; border: 1px solid rgba(255,255,255,.1); }
.moe video { width: 100%; aspect-ratio: 16/9; background: #000; }
.moe .moe-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; flex-wrap: wrap; }
.moe .moe-bar b { font-family: var(--display); font-size: .95rem; color: #fff; display: block; line-height: 1.4; }
.moe .moe-bar small { color: #9fa9c2; font-size: .8rem; }
.jump { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 14px; border-radius: 12px; background: var(--grad-gold); color: #fff; font-weight: 700; font-size: .85rem; }
.jump .ic { width: 16px; height: 16px; }

/* ---------- Timeline ---------- */
.timeline { position: relative; display: grid; gap: 14px; padding-inline-start: 26px; }
.timeline::before { content: ""; position: absolute; inset-inline-start: 8px; top: 8px; bottom: 8px; width: 2px; background: var(--line); border-radius: 2px; }
.timeline::after { content: ""; position: absolute; inset-inline-start: 8px; top: 8px; width: 2px; height: calc(var(--p, 0) * (100% - 16px)); background: var(--grad-gold); border-radius: 2px; transition: height .2s linear; }
.t-item { position: relative; background: var(--white); border: 1px solid var(--line); border-radius: 22px; padding: 18px; }
.t-item::before { content: ""; position: absolute; inset-inline-start: -25px; top: 24px; width: 14px; height: 14px; border-radius: 50%; background: var(--white); border: 3px solid var(--gold); z-index: 1; }
.t-top { display: flex; gap: 12px; align-items: flex-start; }
.t-ic { width: 44px; height: 44px; border-radius: 14px; background: var(--navy); color: var(--gold-3); display: grid; place-items: center; flex: none; }
.t-ic .ic { width: 21px; height: 21px; }
.t-item h3 { font-family: var(--display); font-size: 1.08rem; line-height: 1.45; color: var(--title); }
.t-org { font-size: .9rem; color: var(--gold-2); font-weight: 700; line-height: 1.5; }
.t-date { display: inline-block; margin-top: 4px; font-size: .78rem; color: var(--ink-3); background: var(--bg); border-radius: 8px; padding: 2px 9px; }
.t-item ul { list-style: none; margin-top: 12px; display: grid; gap: 7px; }
.t-item li { position: relative; padding-inline-start: 18px; color: var(--ink-2); font-size: .95rem; line-height: 1.75; }
.t-item li::before { content: ""; position: absolute; inset-inline-start: 2px; top: .75em; width: 6px; height: 6px; border-radius: 2px; background: var(--gold); transform: rotate(45deg); }
.now { display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; font-weight: 700; color: #1d8a52; background: #e7f6ee; padding: 2px 9px; border-radius: 999px; margin-inline-start: 6px; }
.now::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #2fb36d; }

/* ---------- Work cards ---------- */
.works { display: grid; gap: 18px; }
.work { background: var(--white); border: 1px solid var(--line); border-radius: 26px; overflow: hidden; box-shadow: 0 1px 0 rgba(0,0,0,.02); }
.work-media { position: relative; background: var(--navy-soft); }
.shots { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.shots::-webkit-scrollbar { display: none; }
.shots > * { flex: 0 0 100%; scroll-snap-align: center; cursor: zoom-in; }
.shots img { width: 100%; aspect-ratio: 16/9.4; object-fit: cover; object-position: top; }
.dots { position: absolute; bottom: 10px; inset-inline: 0; display: flex; justify-content: center; gap: 6px; }
.dots i { width: 7px; height: 7px; border-radius: 99px; background: rgba(255,255,255,.7); box-shadow: 0 0 0 1px rgba(12,23,51,.15); transition: width .3s, background .3s; cursor: pointer; }
.dots i.on { width: 22px; background: var(--gold); }
.work-body { padding: 20px; }
.work-tag { display: inline-flex; align-items: center; gap: 7px; font-size: .8rem; font-weight: 700; color: var(--gold-2); background: var(--gold-soft); padding: 4px 11px; border-radius: 999px; }
.work h3 { font-family: var(--display); font-size: 1.35rem; line-height: 1.4; color: var(--title); margin-top: 10px; }
.work .role { font-size: .9rem; font-weight: 700; color: var(--ink-3); margin-top: 2px; }
.work p.desc { color: var(--ink-2); margin-top: 10px; font-size: .98rem; }
.feats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.feat { display: flex; gap: 9px; align-items: flex-start; background: var(--bg); border-radius: 14px; padding: 10px 11px; font-size: .86rem; line-height: 1.55; color: var(--ink-2); font-weight: 500; }
.feat .ic { width: 18px; height: 18px; color: var(--gold); margin-top: 2px; }
.work-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.work-links a { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border-radius: 13px; background: var(--navy); color: #fff; font-weight: 700; font-size: .9rem; transition: transform .25s; }
.work-links a.alt { background: var(--white); color: var(--title); border: 1px solid var(--line); }
.work-links a:hover { transform: translateY(-2px); }
.work-links .ic { width: 17px; height: 17px; }
.lamsa-media { display: grid; grid-template-columns: 1.05fr 1fr; gap: 8px; padding: 8px; background: #eef1e9; }
.lamsa-media .phone { border-radius: 18px; overflow: hidden; background: #000; aspect-ratio: 464/832; }
.lamsa-media .phone video { width: 100%; height: 100%; object-fit: cover; }
.lamsa-media .side { display: grid; gap: 8px; }
.lamsa-media .side .tile { aspect-ratio: auto; border-radius: 16px; }
.mission { margin-top: 14px; padding: 14px 16px; border-radius: 16px; background: linear-gradient(135deg, #f1f4ec, #f6efe2); border: 1px solid #e6e2d3; }
.mission b { font-family: var(--display); color: #3f5a3a; font-size: 1rem; }
.mission p { font-size: .9rem; color: var(--ink-2); margin-top: 2px; }
.store { background: var(--grad); color: #fff; padding: 26px 20px; position: relative; overflow: hidden; }
.store::after { content: ""; position: absolute; width: 260px; height: 260px; border-radius: 50%; inset-inline-end: -80px; top: -90px; background: radial-gradient(circle, rgba(216,176,106,.35), transparent 70%); }
.store-nums { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.store-nums div { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); border-radius: 18px; padding: 16px; }
.store-nums b { display: block; font-family: var(--display); font-size: 2.1rem; line-height: 1.1; color: var(--gold-3); direction: ltr; }
html[dir="rtl"] .store-nums b { text-align: right; }
.store-nums div > span { font-size: .84rem; color: #c9d0e0; }

/* ---------- Volunteering ---------- */
.vol-top { display: grid; gap: 12px; margin-bottom: 18px; }
.vol-big { background: var(--grad); color: #fff; border-radius: 26px; padding: 24px; position: relative; overflow: hidden; }
.vol-big::after { content: ""; position: absolute; inset-inline-end: -40px; bottom: -60px; width: 200px; height: 200px; border-radius: 50%; border: 30px solid rgba(216,176,106,.18); }
.vol-big b { font-family: var(--display); font-size: 3.4rem; line-height: 1; color: var(--gold-3); display: block; direction: ltr; }
html[dir="rtl"] .vol-big b { text-align: right; }
.vol-big > span { display: block; margin-top: 8px; font-size: 1rem; color: #d7dcea; position: relative; z-index: 1; }
.medals { display: flex; align-items: center; gap: 14px; background: var(--gold-soft); border: 1px solid #ecdcbc; border-radius: 22px; padding: 16px 18px; }
.medals .m-ic { display: flex; flex: none; }
.medals .m-ic i { width: 42px; height: 42px; border-radius: 50%; background: var(--grad-gold); display: grid; place-items: center; color: #fff; box-shadow: 0 6px 14px -6px rgba(154,113,48,.8); border: 3px solid var(--gold-soft); }
.medals .m-ic i + i { margin-inline-start: -12px; }
.medals b { font-family: var(--display); color: var(--title); font-size: 1.02rem; line-height: 1.4; display: block; }
.medals small { font-size: .86rem; color: var(--ink-2); }
.orgs { display: grid; gap: 14px; }
.org { background: var(--white); border: 1px solid var(--line); border-radius: 24px; overflow: hidden; }
.org-body { padding: 18px; }
.org-head { display: flex; gap: 12px; align-items: center; }
.org-head .oi { width: 46px; height: 46px; border-radius: 14px; background: var(--navy-soft); color: var(--title); display: grid; place-items: center; flex: none; }
.org h3 { font-family: var(--display); font-size: 1.06rem; color: var(--title); line-height: 1.4; }
.org .o-role { font-size: .86rem; color: var(--gold-2); font-weight: 700; line-height: 1.5; }
.org p { margin-top: 10px; color: var(--ink-2); font-size: .95rem; }
.org-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 0 6px 6px; }
.org-strip .tile { aspect-ratio: 4/3; border-radius: 14px; }
.org-strip .tile.big { grid-column: span 3; aspect-ratio: 16/8.5; }
.yt-row { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 18px 18px; scrollbar-width: none; }
.yt-row::-webkit-scrollbar { display: none; }
.yt { flex: 0 0 82%; max-width: 360px; scroll-snap-align: start; border-radius: 16px; overflow: hidden; position: relative; aspect-ratio: 16/9; background: #0a1430; }
.yt img { width: 100%; height: 100%; object-fit: cover; opacity: .85; transition: opacity .3s, transform .6s; }
.yt:hover img { opacity: 1; transform: scale(1.03); }
.yt .play { position: absolute; inset: 0; display: grid; place-items: center; }
.yt .play i { width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,255,.95); display: grid; place-items: center; color: var(--title); box-shadow: 0 10px 24px -8px rgba(0,0,0,.5); transition: transform .3s; }
.yt:hover .play i { transform: scale(1.08); }
.yt .w { position: absolute; top: 10px; inset-inline-start: 10px; background: rgba(12,23,51,.75); color: #fff; font-size: .75rem; font-weight: 700; border-radius: 9px; padding: 3px 9px; }
.yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.mini-orgs { display: grid; gap: 10px; }
.mini { display: flex; gap: 12px; align-items: flex-start; background: var(--white); border: 1px solid var(--line); border-radius: 20px; padding: 16px; }
.mini .oi { width: 42px; height: 42px; border-radius: 13px; background: var(--gold-soft); color: var(--gold-2); display: grid; place-items: center; flex: none; }
.mini h4 { font-family: var(--display); font-size: 1rem; color: var(--title); line-height: 1.45; }
.mini p { font-size: .9rem; color: var(--ink-2); line-height: 1.7; margin-top: 3px; }
.mini .hrs { display: inline-block; margin-top: 6px; font-size: .78rem; font-weight: 700; color: var(--title); background: var(--navy-soft); padding: 2px 9px; border-radius: 8px; }

/* ---------- Certifications ---------- */
.certs { display: grid; gap: 12px; }
.cert { display: flex; gap: 14px; align-items: center; background: var(--white); border: 1px solid var(--line); border-radius: 22px; padding: 14px; cursor: zoom-in; transition: transform .35s, box-shadow .35s, border-color .35s; text-align: start; width: 100%; }
.cert:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--gold-3); }
.cert .thumb { width: 92px; aspect-ratio: 1.33; border-radius: 12px; overflow: hidden; flex: none; background: var(--bg); border: 1px solid var(--line); }
.cert .thumb img { width: 100%; height: 100%; object-fit: cover; }
.cert .org-name { font-size: .78rem; font-weight: 700; color: var(--gold-2); letter-spacing: .02em; }
.cert h3 { font-family: var(--display); font-size: 1rem; color: var(--title); line-height: 1.45; margin-top: 2px; }
.cert p { font-size: .84rem; color: var(--ink-3); line-height: 1.55; margin-top: 2px; }
.cert .go { width: 18px; height: 18px; color: var(--ink-3); margin-inline-start: auto; flex: none; }
html[dir="rtl"] .cert .go { transform: scaleX(-1); }

/* ---------- Academic ---------- */
.gpa { display: grid; gap: 14px; }
.gpa-card { background: var(--grad); border-radius: 26px; padding: 24px; color: #fff; display: flex; align-items: center; gap: 20px; position: relative; overflow: hidden; }
.ring { width: 124px; height: 124px; flex: none; position: relative; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 9; }
.ring .bgc { stroke: rgba(255,255,255,.12); }
.ring .fg { stroke: url(#gg); stroke-linecap: round; stroke-dasharray: 339.3; stroke-dashoffset: 339.3; transition: stroke-dashoffset 2s cubic-bezier(.2,.7,.2,1); }
.gpa-card.in .ring .fg { stroke-dashoffset: 1.5; }
.ring b { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--display); font-size: 1.45rem; color: #fff; direction: ltr; }
.gpa-card h3 { font-family: var(--display); font-size: 1.25rem; line-height: 1.4; }
.gpa-card p { color: #c9d0e0; font-size: .92rem; margin-top: 4px; }
.ranks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rank { background: var(--white); border: 1px solid var(--line); border-radius: 20px; padding: 14px; cursor: zoom-in; text-align: start; transition: transform .3s, box-shadow .3s; }
.rank:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.rank b { display: block; font-family: var(--display); font-size: 1.5rem; color: var(--title); line-height: 1.2; direction: ltr; }
html[dir="rtl"] .rank b { text-align: right; }
.rank .pos { display: inline-block; margin-top: 4px; font-size: .8rem; font-weight: 700; color: var(--gold-2); background: var(--gold-soft); border-radius: 8px; padding: 1px 8px; }
.rank small { display: block; font-size: .8rem; color: var(--ink-3); line-height: 1.5; margin-top: 4px; }
.rank.star { background: var(--gold-soft); border-color: #ecdcbc; }

/* ---------- Honors gallery ---------- */
.filters { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin-bottom: 16px; padding-bottom: 2px; }
.filters::-webkit-scrollbar { display: none; }
.filters button { flex: none; height: 38px; padding: 0 15px; border-radius: 999px; background: var(--white); border: 1px solid var(--line); font-weight: 700; font-size: .86rem; color: var(--ink-2); transition: background .25s, color .25s, border-color .25s; }
.filters button.on { background: var(--navy); color: #fff; border-color: var(--title); }
.honors { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.honor { background: var(--white); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; cursor: zoom-in; text-align: start; transition: transform .35s, box-shadow .35s, opacity .35s; display: flex; flex-direction: column; }
.honor:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.honor .h-img { aspect-ratio: 1.38; overflow: hidden; background: var(--bg); }
.honor .h-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s; }
.honor:hover .h-img img { transform: scale(1.05); }
.honor .h-txt { padding: 10px 12px 12px; }
.honor .h-txt b { display: block; font-family: var(--display); font-size: .88rem; color: var(--title); line-height: 1.5; }
.honor .h-txt small { font-size: .74rem; color: var(--ink-3); }
.honor.hide { display: none; }
.more-wrap { display: flex; justify-content: center; margin-top: 18px; }

/* ---------- Testimonials ---------- */
.quotes { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px var(--gutter) 10px; margin-inline: calc(var(--gutter) * -1); scrollbar-width: none; }
.quotes::-webkit-scrollbar { display: none; }
.quote { flex: 0 0 88%; max-width: 440px; scroll-snap-align: center; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: 24px; padding: 22px; display: flex; flex-direction: column; }
.quote.lead-q { background: linear-gradient(160deg, rgba(216,176,106,.2), rgba(255,255,255,.04)); border-color: rgba(216,176,106,.4); }
.quote .qm { font-family: Georgia, serif; font-size: 3.4rem; line-height: .6; color: var(--gold-3); height: 26px; }
.quote blockquote { direction: ltr; text-align: left; font-family: Georgia, "Times New Roman", serif; font-size: 1.06rem; line-height: 1.65; color: #fff; font-style: italic; }
.quote .tr { margin-top: 10px; font-size: .92rem; color: #b8c0d4; line-height: 1.75; }
html[lang="en"] .quote .tr { display: none; }
.quote .who { margin-top: auto; padding-top: 16px; display: flex; align-items: center; gap: 12px; border-top: 1px solid rgba(255,255,255,.1); }
.quote .av { width: 42px; height: 42px; border-radius: 50%; background: var(--grad-gold); display: grid; place-items: center; font-family: var(--display); font-weight: 800; color: #fff; flex: none; }
.quote .who b { display: block; font-family: var(--display); font-size: .95rem; color: #fff; line-height: 1.4; }
.quote .who small { font-size: .8rem; color: #9fa9c2; }
.quote .view { margin-top: 12px; display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 13px; border-radius: 11px; background: rgba(255,255,255,.1); color: #fff; font-size: .84rem; font-weight: 700; align-self: flex-start; }
.quote .view .ic { width: 16px; height: 16px; color: var(--gold-3); }
.q-nav { display: flex; gap: 8px; justify-content: center; margin-top: 14px; }
.q-nav button { width: 44px; height: 44px; border-radius: 14px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); display: grid; place-items: center; color: #fff; transition: background .25s; }
.q-nav button:hover { background: rgba(255,255,255,.16); }
html[dir="rtl"] .q-nav .ic { transform: scaleX(-1); }

/* ---------- Skills ---------- */
.skills { display: grid; gap: 12px; }
.skill { background: var(--white); border: 1px solid var(--line); border-radius: 22px; padding: 18px; }
.sk-head { display: flex; align-items: center; gap: 12px; }
.sk-head .si { width: 42px; height: 42px; border-radius: 13px; background: var(--navy); color: var(--gold-3); display: grid; place-items: center; flex: none; }
.skill h3 { font-family: var(--display); font-size: 1.04rem; color: var(--title); line-height: 1.4; }
.chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.chips span { padding: 5px 11px; border-radius: 10px; background: var(--bg); border: 1px solid var(--line); font-size: .84rem; font-weight: 500; color: var(--ink-2); }
.marquee { overflow: hidden; margin-top: 26px; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee .track { display: flex; gap: 10px; width: max-content; animation: slide 38s linear infinite; }
html[dir="rtl"] .marquee .track { animation-name: slide-rtl; }
.marquee span { padding: 10px 18px; border-radius: 14px; background: var(--white); border: 1px solid var(--line); font-family: var(--display); font-weight: 700; color: var(--title); font-size: .92rem; white-space: nowrap; }
.marquee span:nth-child(3n) { background: var(--gold-soft); border-color: #ecdcbc; }
@keyframes slide { to { transform: translateX(-50%); } }
@keyframes slide-rtl { to { transform: translateX(50%); } }

/* ---------- Contact ---------- */
.contact-card { background: var(--grad); border-radius: 30px; padding: 28px 22px; color: #fff; position: relative; overflow: hidden; }
.contact-card::before { content: ""; position: absolute; inset-inline-end: -120px; top: -120px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(216,176,106,.3), transparent 70%); }
.contact-card .title { color: #fff; position: relative; }
.contact-card .sub { color: #c9d0e0; position: relative; }
.c-list { position: relative; display: grid; gap: 10px; margin-top: 22px; }
.c-item { display: flex; align-items: center; gap: 13px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); border-radius: 18px; padding: 13px 14px; transition: background .25s, transform .25s; }
.c-item:hover { background: rgba(255,255,255,.12); transform: translateY(-2px); }
.c-item .ci { width: 44px; height: 44px; border-radius: 13px; background: rgba(255,255,255,.1); display: grid; place-items: center; color: var(--gold-3); flex: none; }
.c-item.wa .ci { background: #25d366; color: #fff; }
.c-item small { display: block; font-size: .78rem; color: #9fa9c2; line-height: 1.4; }
.c-item b { display: block; font-size: .98rem; line-height: 1.5; word-break: break-all; }
.cv-row { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.cv-row a { display: flex; align-items: center; justify-content: center; gap: 8px; height: 52px; border-radius: 16px; background: var(--grad-gold); color: #fff; font-family: var(--display); font-weight: 700; font-size: .92rem; transition: transform .25s; }
.cv-row a.en { background: #fff; color: var(--title); }
.cv-row a:hover { transform: translateY(-2px); }
.cv-row .ic { width: 18px; height: 18px; }
footer { padding: 28px 0 34px; text-align: center; font-size: .85rem; color: var(--ink-3); }
footer b { color: var(--title); font-family: var(--display); }

/* floating WhatsApp */
.fab { position: fixed; inset-inline-end: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 70; width: 56px; height: 56px; border-radius: 18px; background: #25d366; color: #fff; display: grid; place-items: center; box-shadow: 0 14px 28px -10px rgba(37,211,102,.7); transform: translateY(90px); transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.fab.show { transform: none; }
.fab .ic { width: 28px; height: 28px; }

/* ---------- Lightbox ---------- */
.lb { position: fixed; inset: 0; z-index: 200; background: rgba(8,14,32,.92); display: flex; flex-direction: column; opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s; }
.lb.open { opacity: 1; visibility: visible; }
.lb-top { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; color: #fff; gap: 10px; }
.lb-top b { font-family: var(--display); font-size: .95rem; line-height: 1.5; }
.lb-top small { color: #9fa9c2; font-size: .8rem; display: block; }
.lb-btn { width: 44px; height: 44px; border-radius: 14px; background: rgba(255,255,255,.1); color: #fff; display: grid; place-items: center; flex: none; }
.lb-stage { flex: 1; display: grid; place-items: center; padding: 0 12px; min-height: 0; overflow: auto; }
.lb-stage img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 10px; transform: scale(.96); opacity: 0; transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity .35s; box-shadow: 0 30px 60px -20px rgba(0,0,0,.6); }
.lb.open .lb-stage img.ready { transform: none; opacity: 1; }
.lb-nav { display: flex; justify-content: center; gap: 10px; padding: 12px 0 calc(16px + env(safe-area-inset-bottom)); }
html[dir="rtl"] .lb-nav .ic { transform: scaleX(-1); }
.lb-count { color: #9fa9c2; font-size: .85rem; display: grid; place-items: center; min-width: 60px; }

/* ---------- Desktop ---------- */
@media (min-width: 720px) {
  :root { --gutter: 28px; }
  .stats { grid-template-columns: repeat(4, 1fr); }
  .pillars { grid-template-columns: repeat(3, 1fr); }
  .honors { grid-template-columns: repeat(3, 1fr); }
  .ranks { grid-template-columns: repeat(3, 1fr); }
  .certs { grid-template-columns: 1fr 1fr; }
  .skills { grid-template-columns: 1fr 1fr; }
  .mini-orgs { grid-template-columns: 1fr 1fr; }
  .quote { flex-basis: 46%; }
  .feats { grid-template-columns: repeat(3, 1fr); }
  .yt { flex-basis: 46%; }
}
@media (min-width: 1000px) {
  .sheet { display: none !important; }
  :root { --top: 76px; }
  .nav-desk { display: flex; }
  .menu-btn { display: none; }
  .sec { padding: 96px 0; }
  .hero { padding: calc(var(--top) + 40px) 0 70px; }
  .hero .wrap { grid-template-columns: 1.2fr .9fr; align-items: center; gap: 56px; }
  .hero-photo { order: 2; max-width: none; }
  .stats { grid-column: 1 / -1; }
  .about-grid { grid-template-columns: 1.15fr 1fr; align-items: start; }
  .pillars { grid-template-columns: 1fr; }
  .film { grid-template-columns: 1.1fr 1fr; align-items: start; gap: 22px; }
  .film-hero { min-height: 480px; grid-row: span 3; }
  .works { grid-template-columns: 1fr 1fr; }
  .work.full { grid-column: 1 / -1; display: grid; grid-template-columns: 1.25fr 1fr; }
  .work.full .shots img { aspect-ratio: auto; height: 100%; min-height: 420px; }
  .work.full .work-media { height: 100%; }
  .work.full .shots { height: 100%; }
  .timeline { grid-template-columns: 1fr 1fr; padding-inline-start: 0; gap: 18px; }
  .timeline::before, .timeline::after, .t-item::before { display: none; }
  .vol-top { grid-template-columns: 1fr 1.4fr; }
  .orgs { grid-template-columns: 1.2fr 1fr; align-items: start; }
  .honors { grid-template-columns: repeat(4, 1fr); }
  .ranks { grid-template-columns: repeat(6, 1fr); }
  .gpa { grid-template-columns: 1fr; }
  .quote { flex-basis: 31%; }
  .skills { grid-template-columns: repeat(3, 1fr); }
  .contact-card { padding: 50px; display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; align-items: start; }
  .contact-card .c-list { grid-row: span 3; margin-top: 0; }
  .fab { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .rv, .hero-text > * { opacity: 1 !important; transform: none !important; }
}

/* desktop refinements */
@media (min-width: 1000px) {
  .hero .wrap { grid-template-columns: 1.15fr .85fr; grid-template-areas: "text photo" "stats stats"; }
  .hero-text { grid-area: text; }
  .hero-photo { grid-area: photo; max-height: 560px; }
  .stats { grid-area: stats; }
  .film-grid { grid-template-columns: repeat(4, 1fr); }
  .film-grid .tile.wide { grid-column: span 2; aspect-ratio: 16/10; }
  .film-grid .tile.tall { aspect-ratio: auto; height: 100%; min-height: 0; }
  .film-grid .tile.sq { aspect-ratio: 4/3; }
  .film-grid > :nth-child(2) { grid-row: span 1; }
  .film-grid .tile.tall img, .film-grid .tile.tall video { position: absolute; inset: 0; }
}

/* =========================================================
   v2 — cutout hero, dark mode, richer motion
   ========================================================= */
body { transition: background-color .5s ease, color .5s ease; }
.sec, .about-card, .pillar, .t-item, .work, .org, .mini, .cert, .rank, .honor, .skill, .stat, .chips span, .feat, .topbar { transition-property: background-color, border-color, color, box-shadow, transform, opacity, clip-path; }

/* ---- hero photo (cutout + motion) ---- */
.hero-photo { background: none; box-shadow: none; border-radius: 0; overflow: visible; aspect-ratio: 1 / 1.08; max-width: 430px; clip-path: inset(-400px -400px 0 -400px); }
.hero-photo::after { display: none; }
.hero-photo .disc { position: absolute; left: 10%; width: 80%; aspect-ratio: 1; bottom: 4%; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #ffffff 0%, var(--navy-soft) 55%, #d9e0ef 100%); box-shadow: inset 0 -30px 60px -30px rgba(20,37,77,.25); transform: scale(.6); opacity: 0; transition: transform 1.4s cubic-bezier(.2,.8,.2,1), opacity 1s; }
.hero-photo .disc::after { content: ""; position: absolute; inset: -14%; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 70%, rgba(216,176,106,.55) 85%, transparent 100%); -webkit-mask: radial-gradient(circle, transparent 66%, #000 67%, #000 69%, transparent 70%); mask: radial-gradient(circle, transparent 66%, #000 67%, #000 69%, transparent 70%); animation: spin 7s linear infinite; }
.hero-photo .ring { position: absolute; left: -2%; width: 104%; aspect-ratio: 1; bottom: -8%; border-radius: 50%; border: 1.5px dashed rgba(184,138,62,.45); animation: spin 70s linear infinite; }
.hero-photo .ring.r2 { left: 18%; width: 64%; bottom: 12%; border: 1.5px dotted rgba(20,37,77,.25); animation-duration: 45s; animation-direction: reverse; }
@keyframes spin { to { transform: rotate(360deg); } }
.hero-photo .orb { position: absolute; border-radius: 50%; animation: float 6s ease-in-out infinite; }
.hero-photo .o1 { width: 14px; height: 14px; background: var(--gold); top: 18%; left: 8%; box-shadow: 0 0 0 6px rgba(184,138,62,.15); }
.hero-photo .o2 { width: 9px; height: 9px; background: var(--navy-3); top: 10%; right: 14%; animation-delay: -2s; }
.hero-photo .o3 { width: 18px; height: 18px; background: var(--grad-gold); top: 46%; right: 2%; animation-delay: -4s; animation-duration: 8s; }
.hero-photo .o4 { width: 7px; height: 7px; background: var(--gold-3); top: 58%; left: 2%; animation-delay: -1s; }
.hero-photo .o5 { width: 11px; height: 11px; border: 2px solid var(--navy-3); top: 30%; right: 6%; animation-delay: -3s; animation-duration: 7s; }
@keyframes float { 50% { transform: translate(6px, -14px); } }
.hero-photo img { position: absolute; left: 50%; bottom: -3%; width: 90%; height: auto; object-fit: contain; transform: translateX(-50%) translateY(60px); opacity: 0; filter: drop-shadow(0 22px 28px rgba(12,23,51,.22)); transition: transform 1.3s cubic-bezier(.2,.8,.2,1) .15s, opacity 1s .15s; }
body.loaded .hero-photo img { transform: translateX(-50%); opacity: 1; }
body.loaded .hero-photo .disc { transform: none; opacity: 1; }
.hero-photo .badge { z-index: 2; bottom: 6%; inset-inline-start: 0; animation: bob 5s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-7px); } }
.no-js .hero-photo img { opacity: 1; transform: translateX(-50%); }

/* hero particle canvas + blobs */
.fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.hero .wrap { z-index: 1; }
.blobs { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.blobs i { position: absolute; width: 360px; height: 360px; border-radius: 50%; filter: blur(70px); opacity: .5; animation: drift 20s ease-in-out infinite alternate; }
.blobs i:nth-child(1) { background: rgba(216,176,106,.35); top: -120px; inset-inline-end: -100px; }
.blobs i:nth-child(2) { background: rgba(44,69,131,.35); bottom: -140px; inset-inline-start: -120px; animation-duration: 26s; animation-delay: -8s; }
.sec.navy .blobs i:nth-child(1) { background: rgba(216,176,106,.22); }
.sec.navy .blobs i:nth-child(2) { background: rgba(60,95,180,.4); }
@keyframes drift { 33% { transform: translate(60px, 40px) scale(1.15); } 66% { transform: translate(-40px, 80px) scale(.9); } 100% { transform: translate(30px, -30px) scale(1.05); } }
.sec > .wrap { position: relative; z-index: 1; }

/* ---- richer reveal variants ---- */
.rv[data-a="left"] { transform: translateX(-46px); }
.rv[data-a="right"] { transform: translateX(46px); }
.rv[data-a="zoom"] { transform: scale(.9); }
.rv[data-a="flip"] { transform: perspective(900px) rotateX(16deg) translateY(36px); transform-origin: 50% 100%; }
.rv[data-a="clip"] { opacity: 1; transform: none; }
.rv[data-a="clip"] > * { clip-path: inset(0 0 100% 0); transition: clip-path 1.1s cubic-bezier(.7,0,.2,1); transition-delay: inherit; }
.rv[data-a="clip"].in > * { clip-path: inset(0 0 0 0); }
.rv[data-a="clip"] > .blobs { clip-path: none; }
.rv.in[data-a] { transform: none; opacity: 1; }
.rv .tile img, .rv.tile img, .rv .shots img, .rv .h-img img { transition: transform 1.4s cubic-bezier(.2,.7,.2,1); }
.rv:not(.in) .tile img, .rv:not(.in).tile img, .rv:not(.in) .h-img img { transform: scale(1.18); }

/* title word reveal */
.title .w { display: inline-block; opacity: 0; transform: translateY(70%) rotate(3deg); filter: blur(6px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1), filter .8s; transition-delay: calc(var(--i) * 70ms + 80ms); }
.head.in .title .w, .contact-card.in .title .w { opacity: 1; transform: none; filter: none; }
.eyebrow::before { transition: width .9s cubic-bezier(.2,.7,.2,1) .1s; }
.head:not(.in) .eyebrow::before { width: 0; }
.head .sub { transition: opacity .9s .35s, transform .9s .35s; }
.head:not(.in) .sub { opacity: 0; transform: translateY(14px); }

/* card hover lift with gold glow */
@media (hover: hover) {
  .work, .org, .t-item, .skill { transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s, border-color .45s, opacity .9s, background-color .5s; }
  .work:hover, .org:hover, .t-item:hover, .skill:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: var(--gold-3); }
  .btn-navy:hover, .btn-gold:hover { box-shadow: 0 20px 34px -14px rgba(12,23,51,.8); }
}
.btn { position: relative; overflow: hidden; }
.btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%); transform: translateX(-120%); transition: transform .8s; }
.btn:hover::after { transform: translateX(120%); }

/* stats pop */
.stat.rv { transform: translateY(30px) scale(.94); }
.stat.rv.in { transform: none; }

/* scroll-down cue */
.cue { display: none; }

/* ---- theme toggle ---- */
.theme { width: 38px; padding: 0; justify-content: center; position: relative; overflow: hidden; }
.theme svg { position: absolute; transition: transform .6s cubic-bezier(.2,.8,.2,1), opacity .4s; }
.theme .moon { transform: translateY(0) rotate(0); }
.theme .sun { transform: translateY(30px) rotate(-90deg); opacity: 0; }
[data-theme="dark"] .theme .moon { transform: translateY(-30px) rotate(90deg); opacity: 0; }
[data-theme="dark"] .theme .sun { transform: none; opacity: 1; }

/* ---- dark mode ---- */
:root[data-theme="dark"] {
  --bg: #0a1020;
  --white: #111a2f;
  --line: #22304f;
  --ink: #e9edf6;
  --ink-2: #b6bfd2;
  --ink-3: #8a94ab;
  --title: #f3f6fc;
  --navy: #22386c;
  --navy-soft: #1a2747;
  --gold-soft: #2a2316;
  --shadow: 0 12px 30px -14px rgba(0,0,0,.6);
  --shadow-lg: 0 26px 50px -22px rgba(0,0,0,.75);
  color-scheme: dark;
}
[data-theme="dark"] .topbar.solid { background: rgba(10,16,32,.82); }
[data-theme="dark"] .sec.navy { background: #050a17; }
[data-theme="dark"] .hero::before { background: radial-gradient(60% 50% at 85% 10%, rgba(60,95,180,.25), transparent 70%), radial-gradient(50% 40% at 0% 70%, rgba(216,176,106,.12), transparent 70%); }
[data-theme="dark"] .hero-photo .disc { background: radial-gradient(circle at 50% 35%, #2a3f74 0%, #18264a 60%, #0f1a36 100%); box-shadow: inset 0 -30px 60px -30px rgba(0,0,0,.5), 0 0 80px -20px rgba(60,95,180,.5); }
[data-theme="dark"] .hero-photo .ring.r2 { border-color: rgba(180,200,240,.25); }
[data-theme="dark"] .hero-photo .badge { background: rgba(17,26,47,.9); }
[data-theme="dark"] .mission { background: linear-gradient(135deg, #18241c, #2a2316); border-color: #2c3a2c; }
[data-theme="dark"] .mission b { color: #b9d3a8; }
[data-theme="dark"] .lamsa-media { background: #142019; }
[data-theme="dark"] .medals { border-color: #3a3120; }
[data-theme="dark"] .rank.star { border-color: #3a3120; }
[data-theme="dark"] .marquee span:nth-child(3n) { border-color: #3a3120; }
[data-theme="dark"] .now { background: rgba(47,179,109,.15); color: #6ee0a2; }
[data-theme="dark"] .work-tag { color: var(--gold-3); }
[data-theme="dark"] .t-org, [data-theme="dark"] .org .o-role, [data-theme="dark"] .cert .org-name, [data-theme="dark"] .rank .pos { color: var(--gold-3); }
[data-theme="dark"] .cv-row a.en { color: #14254d; }
[data-theme="dark"] .yt .play i { color: #14254d; }
[data-theme="dark"] .filters button.on { background: var(--gold); border-color: var(--gold); }
[data-theme="dark"] .work-links a:not(.alt) { background: var(--grad-gold); }
[data-theme="dark"] .menu-btn { background: var(--gold); }
[data-theme="dark"] .brand i { box-shadow: 0 0 0 1px rgba(216,176,106,.3); }
[data-theme="dark"] .shots img, [data-theme="dark"] .honor .h-img img, [data-theme="dark"] .cert .thumb img { filter: brightness(.92); }
[data-theme="dark"] .sheet .panel, .sheet .sheet-panel { background: var(--white); }
[data-theme="dark"] .progress { box-shadow: 0 0 12px rgba(216,176,106,.6); }

@media (min-width: 1000px) {
  .hero-photo { max-width: 520px; aspect-ratio: 1 / 1.05; max-height: none; }
}
@media (prefers-reduced-motion: reduce) {
  .title .w, .head .sub { opacity: 1 !important; transform: none !important; filter: none !important; }
  .rv[data-a="clip"] > * { clip-path: none !important; }
  .hero-photo img { opacity: 1 !important; transform: translateX(-50%) !important; }
  .hero-photo .disc { opacity: 1 !important; transform: none !important; }
}

html, body { overflow-x: clip; }

/* ---- Thmanyah tuning: numbers & latin stay in sans ---- */
html[lang="en"] { --display: "Alexandria", "Plex Arabic", system-ui, sans-serif; }
.stat b, .ff b, .store-nums b, .vol-big b, .rank b, .ring b, .hero-stat, .lb-count, .brand i { font-family: var(--sans-display); }
.title, .hero h1 { letter-spacing: 0; font-weight: 700; }
.hero h1 { line-height: 1.25; }

/* =========== Bento (cycling tiles) =========== */
.bento { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bt { position: relative; border-radius: 22px; overflow: hidden; min-height: 150px; padding: 16px; display: flex; flex-direction: column; justify-content: space-between; background: var(--white); border: 1px solid var(--line); }
.bt small { font-size: .78rem; font-weight: 700; color: var(--ink-3); letter-spacing: .02em; position: relative; z-index: 1; }
.bt.navy { background: var(--grad); border: 0; color: #fff; } .bt.navy small { color: #aab4cc; }
.bt.gold { background: var(--grad-gold); border: 0; color: #fff; } .bt.gold small { color: rgba(255,255,255,.8); }
.bt.soft { background: var(--gold-soft); border-color: transparent; }
.bt.wide { grid-column: span 2; }
.bt.tall { grid-row: span 2; }
.cyc { position: relative; height: 1.35em; overflow: hidden; font-family: var(--display); font-weight: 700; font-size: clamp(1.9rem, 8.5vw, 3rem); line-height: 1.35; color: var(--title); }
.bt.navy .cyc, .bt.gold .cyc { color: #fff; }
.cyc.num { font-family: var(--sans-display); font-weight: 800; direction: ltr; }
.cyc > span { position: absolute; inset-inline: 0; top: 0; white-space: nowrap; transform: translateY(105%); opacity: 0; transition: transform .8s cubic-bezier(.7,0,.2,1), opacity .5s; }
.cyc > span.on { transform: none; opacity: 1; }
.cyc > span.out { transform: translateY(-105%); opacity: 0; }
html[dir="rtl"] .cyc.num > span { text-align: right; }
.bt .cap { font-size: .84rem; color: var(--ink-2); line-height: 1.55; position: relative; z-index: 1; }
.bt.navy .cap { color: #c9d0e0; } .bt.gold .cap { color: rgba(255,255,255,.9); }
.bt .glyph { position: absolute; inset-inline-end: -10px; bottom: -40px; font-family: var(--display); font-size: 9rem; line-height: 1; color: rgba(255,255,255,.08); pointer-events: none; transition: transform 1.2s cubic-bezier(.2,.8,.2,1); }
.bt.soft .glyph { color: rgba(184,138,62,.18); }
.bt.spin-t { display: grid; place-items: center; }
.bt.spin-t .badge-ring { width: 108px; height: 108px; position: relative; animation: spin 14s linear infinite; }
.bt.spin-t .badge-ring svg { width: 100%; height: 100%; overflow: visible; }
.bt.spin-t .badge-ring text { font-family: var(--sans-display); font-size: 10.5px; font-weight: 700; letter-spacing: 2.6px; fill: var(--gold); }
.bt.spin-t .core { position: absolute; width: 50px; height: 50px; border-radius: 50%; background: var(--grad); display: grid; place-items: center; color: var(--gold-3); }
.bt.spin-t .core .ic { width: 22px; height: 22px; }
.bt.photo { padding: 0; min-height: 0; }
.bt.photo img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; transition: opacity 1s, transform 6s linear; opacity: 0; transform: scale(1.12); }
.bt.photo img.on { opacity: 1; transform: scale(1); }
.bt.photo small { position: absolute; bottom: 12px; inset-inline-start: 12px; background: rgba(12,23,51,.72); color: #fff; padding: 4px 10px; border-radius: 9px; backdrop-filter: blur(6px); }
@media (min-width: 720px) { .bento { grid-template-columns: repeat(4, 1fr); } .bt { min-height: 190px; } }

/* =========== Scroll-lit statement =========== */
.statement { background: #070d1c; color: #fff; padding: 90px 0; position: relative; overflow: hidden; }
.statement p { font-family: var(--display); font-weight: 700; font-size: clamp(1.9rem, 7.5vw, 3.6rem); line-height: 1.55; max-width: 980px; }
html[lang="en"] .statement p { line-height: 1.3; }
.statement .sw { opacity: .14; transition: opacity .35s, color .35s; }
.statement .sw.lit { opacity: 1; }
.statement .sw.g { color: var(--gold-3); }
.statement .mark { display: flex; align-items: center; gap: 10px; margin-top: 30px; color: #8a94ab; font-size: .9rem; }
.statement .mark i { width: 34px; height: 2px; background: var(--gold); }

/* =========== Infinite photo carousel =========== */
.reel { overflow: hidden; margin-top: 26px; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.reel .rt { display: flex; gap: 12px; width: max-content; animation: slide 50s linear infinite; }
html[dir="rtl"] .reel .rt { animation-name: slide-rtl; }
.reel:hover .rt { animation-play-state: paused; }
.reel .rc { width: 210px; height: 270px; border-radius: 20px; overflow: hidden; flex: none; position: relative; cursor: zoom-in; background: #0a1430; transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.reel .rc:nth-child(even) { margin-top: 26px; }
.reel .rc:hover { transform: translateY(-8px) rotate(-1.5deg); }
.reel .rc img { width: 100%; height: 100%; object-fit: cover; }
.reel .rc.c img { object-fit: contain; background: #fff; padding: 8px; }
@media (min-width: 1000px) { .reel .rc { width: 260px; height: 330px; } }
@media (prefers-reduced-motion: reduce) { .statement .sw { opacity: 1; } }
.cyc-cap { position: relative; height: 1.6em; overflow: hidden; }
.cyc-cap > span { position: absolute; inset-inline: 0; top: 0; white-space: nowrap; opacity: 0; transform: translateY(100%); transition: transform .8s cubic-bezier(.7,0,.2,1), opacity .5s; }
.cyc-cap > span.on { opacity: 1; transform: none; }
.bt.spin-t svg { direction: ltr; }
.bt.soft .cyc { font-size: clamp(1.15rem, 4.6vw, 1.7rem) !important; }
.bt.soft .cyc { height: 2.7em; }
.bt.soft .cyc > span { white-space: normal; top: auto; bottom: 0; }
.reel-sec { padding-bottom: 70px; overflow: hidden; }
.reel-sec .head { margin-bottom: 10px; }
.reel-sec .eyebrow::before { display: none; }
.reel-cyc { margin: 10px auto 0; font-size: clamp(1.5rem, 6vw, 2.2rem); color: var(--gold); max-width: 360px; }
.reel-cyc > span { text-align: center; }
.reel { margin-top: 14px; }
.reel.rev .rt { animation-direction: reverse; animation-duration: 60s; }
.reel .rc .rl { position: absolute; bottom: 10px; inset-inline-start: 10px; background: rgba(12,23,51,.72); color: #fff; font-size: .78rem; font-weight: 700; padding: 4px 10px; border-radius: 9px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.reel.rev .rc { height: 200px; width: 280px; }
.reel.rev .rc:nth-child(even) { margin-top: 0; }
@media (min-width: 1000px) { .reel.rev .rc { height: 240px; width: 340px; } }
.reel-cyc { height: 1.6em; line-height: 1.6; }

/* ---- framed photo (no cutout) ---- */
.hero-photo { clip-path: none; aspect-ratio: 1 / 1.05; }
.hero-photo .frame { position: absolute; left: 9%; right: 9%; top: 5%; bottom: 9%; border-radius: 30px; padding: 7px; background: linear-gradient(145deg, rgba(255,255,255,.95), rgba(255,255,255,.55)); border: 1px solid rgba(184,138,62,.35); box-shadow: 0 30px 60px -28px rgba(12,23,51,.45); z-index: 1; opacity: 0; transform: translateY(40px) scale(.96); transition: transform 1.3s cubic-bezier(.2,.8,.2,1) .15s, opacity 1s .15s; }
.hero-photo .frame::before { content: ""; position: absolute; inset: -12px; border-radius: 38px; border: 1.5px solid rgba(184,138,62,.3); transform: rotate(-3deg); z-index: -1; transition: transform 1.6s cubic-bezier(.2,.8,.2,1) .4s; }
body.loaded .hero-photo .frame { opacity: 1; transform: none; }
body:not(.loaded) .hero-photo .frame::before { transform: rotate(0); }
.hero-photo .frame img { position: static; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; border-radius: 24px; transform: none !important; opacity: 1 !important; filter: none; left: auto; bottom: auto; }
.hero-photo .disc { left: 4%; width: 92%; bottom: 0; }
.hero-photo .badge { bottom: 3%; z-index: 3; }
[data-theme="dark"] .hero-photo .frame { background: linear-gradient(145deg, rgba(40,58,105,.9), rgba(17,26,47,.6)); border-color: rgba(216,176,106,.35); }
.no-js .hero-photo .frame { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .hero-photo .frame { opacity: 1 !important; transform: none !important; } }
.hero-photo .frame { bottom: auto; aspect-ratio: auto; }
.hero-photo .frame img { height: auto; aspect-ratio: 1100 / 1126; object-fit: contain; }
.ranks.two { grid-template-columns: 1fr; }
@media (min-width: 720px) { .ranks.two { grid-template-columns: 1.4fr 1fr; } }
.view-cert { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: .82rem; font-weight: 700; color: var(--title); background: var(--navy-soft); padding: 6px 12px; border-radius: 10px; }
.view-cert .ic { width: 16px; height: 16px; color: var(--gold); }
.mina-nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.mina-nums div { background: var(--navy-soft); border-radius: 14px; padding: 10px 12px; }
.mina-nums b { display: block; font-family: var(--sans-display); font-size: 1.35rem; color: var(--title); line-height: 1.2; }
.mina-nums span { font-size: .78rem; color: var(--ink-3); }