/* =============================================================================
   Mostafa Yonis — Portfolio
   Palette : Navy (#3a68a8 → #081426) + Gold (#d4af37 → #eed488)
   Fonts   : IBM Plex Sans Arabic / IBM Plex Sans / IBM Plex Mono
   ============================================================================= */

/* ------------------------------- 1. TOKENS -------------------------------- */
:root{
  /* brand — navy (كحلي) + gold (ذهبي) */
  --navy-50:#eef3fa;  --navy-100:#dbe6f5; --navy-200:#bdd0ea;
  --navy-300:#93b1d9; --navy-400:#5f8cc4; --navy-500:#3a68a8;
  --navy-600:#2a5089; --navy-700:#1f3f6e; --navy-800:#183252; --navy-900:#0f2138;
  --gold-200:#f7e7b0; --gold-300:#eed488; --gold-400:#e3c15c;
  --gold-500:#d4af37; --gold-600:#b8912a; --orange-500:#f97316;
  --ink:#08172b;                      /* dark ink for text on gold surfaces */

  --grad-brand: linear-gradient(115deg, var(--gold-300) 0%, var(--gold-500) 100%);
  /* navy -> gold, both stops light enough to stay legible when clipped into TEXT */
  --grad-ink : linear-gradient(115deg, var(--navy-300) 0%, var(--gold-300) 100%);
  --grad-soft : linear-gradient(135deg, rgba(58,104,168,.18), rgba(212,175,55,.15));

  /* dark theme (default) */
  --bg:#081426;
  --bg-2:#0c1c33;
  --surface:rgba(255,255,255,.045);
  --surface-2:rgba(255,255,255,.072);
  --surface-solid:#0e2038;
  --line:rgba(255,255,255,.10);
  --line-2:rgba(255,255,255,.18);
  --txt:#eaf1fb;
  --txt-2:#adc0d8;
  --txt-3:#8199b5;
  --shadow:0 26px 60px -22px rgba(0,0,0,.75);
  --shadow-sm:0 10px 26px -12px rgba(0,0,0,.7);
  --glass:rgba(10,24,44,.72);

  /* geometry */
  --r-sm:10px; --r-md:16px; --r-lg:22px; --r-xl:30px; --r-pill:999px;
  --container:1220px;
  --gut:clamp(18px,4vw,40px);
  --sec-y:clamp(72px,9vw,132px);

  /* type */
  --f-ar:"Tajawal","Noto Sans Arabic","IBM Plex Sans Arabic","IBM Plex Sans",system-ui,"Segoe UI",sans-serif;
  --f-en:"IBM Plex Sans","IBM Plex Sans Arabic",system-ui,"Segoe UI",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,monospace;
  --fs-base:17.5px;
  --lh:1.85;

  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
}

/* light theme */
html[data-theme="light"]{
  --bg:#f5f8fc;
  --bg-2:#ffffff;
  --surface:rgba(255,255,255,.78);
  --surface-2:rgba(255,255,255,.95);
  --surface-solid:#ffffff;
  --line:rgba(12,38,74,.13);
  --line-2:rgba(12,38,74,.24);
  --txt:#0a1b30;
  --txt-2:#3a5473;
  --txt-3:#4d6784;            /* 5.6:1 on --bg */
  --navy-600:#1c4a7d; --navy-700:#143a63;
  --gold-600:#8a6414;         /* 5.2:1 on --bg */
  --gold-700:#755410;
  --shadow:0 24px 52px -24px rgba(12,38,74,.30);
  --shadow-sm:0 10px 24px -14px rgba(12,38,74,.28);
  --glass:rgba(255,255,255,.80);
  --grad-brand:linear-gradient(115deg,var(--gold-400) 0%,var(--gold-500) 100%);
  --grad-ink:linear-gradient(115deg,var(--navy-700) 0%,var(--gold-700) 100%);
  --grad-soft:linear-gradient(135deg,rgba(58,104,168,.10),rgba(212,175,55,.12));
}

/* On a light background the bright navy/gold are decoration only — anything
   carrying TEXT must use the darker "ink" variants to stay legible (WCAG AA). */
html[data-theme="light"] :is(
  .eyebrow, .ic-icon, .sk-icon, .ci, .tl-role, .tl-badge, .tl-more,
  .edu-degree, .ic-good, .pc-chip, .tl-chips .chip-sm, .hero-meta .ico,
  .tl-meta .ico, .edu-facts .ico, .panel-title .ico, .exp-item .ico,
  .mobile-nav nav a span, .mobile-nav-foot .ico
){color:var(--navy-700)}
html[data-theme="light"] :is(.ic-neutral, .pc-chip-alt, .float-card .ico){color:var(--gold-700)}
html[data-theme="light"] :is(.contact-list a:hover, .footer-links a:hover, .btn-ghost:hover, .hero-meta a:hover){color:var(--navy-700)}
html[data-theme="light"] .ic-metric .from{color:var(--txt-3)}
html[data-theme="light"] .err{color:#c0261c}          /* 5.7:1  (orange-500 = 2.7:1) */

/* ------------------------------ 2. BASE ----------------------------------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}

html{
  scroll-behavior:smooth;
  scroll-padding-top:92px;
  -webkit-text-size-adjust:100%;
}
body{
  font-family:var(--f-en);
  font-size:var(--fs-base);
  line-height:var(--lh);
  color:var(--txt);
  background:var(--bg);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  transition:background .5s var(--ease), color .4s var(--ease);
}
html[lang="ar"] body,
html[dir="rtl"] body{font-family:var(--f-ar)}

/* fluid type scale — generous, high legibility */
h1,h2,h3,h4{line-height:1.22; font-weight:700; letter-spacing:-.01em}
html[dir="rtl"] h1,html[dir="rtl"] h2,html[dir="rtl"] h3{letter-spacing:0; line-height:1.42}
p{text-wrap:pretty}

a{color:inherit; text-decoration:none}
button,input,textarea{font:inherit; color:inherit}
button{background:none; border:0; cursor:pointer}
img,svg{display:block; max-width:100%}
ul{list-style:none}

::selection{background:var(--navy-500); color:#fff}
html[data-theme="light"] ::selection{background:var(--navy-500); color:#fff}

/* scrollbar */
::-webkit-scrollbar{width:11px; height:11px}
::-webkit-scrollbar-track{background:var(--bg-2)}
::-webkit-scrollbar-thumb{background:linear-gradient(var(--navy-600),var(--gold-500)); border-radius:99px; border:3px solid var(--bg-2)}

:focus-visible{outline:2.5px solid var(--gold-400); outline-offset:3px; border-radius:6px}

.container{width:min(100% - (var(--gut)*2), var(--container)); margin-inline:auto}

.ico{width:1em; height:1em; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex:none}

.skip-link{
  position:fixed; inset-block-start:-100px; inset-inline-start:16px; z-index:200;
  background:var(--gold-500); color:var(--ink); padding:12px 20px; border-radius:var(--r-sm); font-weight:700;
}
.skip-link:focus{inset-block-start:16px}

.noscript-note{padding:20px; text-align:center; color:var(--txt-2); border:1px dashed var(--line-2); border-radius:var(--r-md)}

/* --------------------------- 3. SCROLL PROGRESS --------------------------- */
.scroll-progress{position:fixed; inset-block-start:0; inset-inline:0; height:3px; z-index:120; pointer-events:none}
.scroll-progress span{
  display:block; height:100%; width:0;
  background:var(--grad-brand);
  box-shadow:0 0 14px rgba(212,175,55,.7);
  transition:width .12s linear;
}

/* ------------------------------ 4. HEADER --------------------------------- */
.site-header{
  position:fixed; inset-block-start:0; inset-inline:0; z-index:110;
  transition:background .4s var(--ease), box-shadow .4s var(--ease), backdrop-filter .4s, border-color .4s;
  border-block-end:1px solid transparent;
}
.site-header.is-stuck{
  background:var(--glass);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  border-block-end-color:var(--line);
  box-shadow:0 12px 34px -26px rgba(0,0,0,.7);
}
.header-inner{
  display:flex; align-items:center; gap:18px;
  height:82px; transition:height .4s var(--ease);
}
.site-header.is-stuck .header-inner{height:68px}

/* brand */
.brand{display:flex; align-items:center; gap:12px; margin-inline-end:auto; flex:none}
.brand-mark{
  width:46px; height:46px; flex:none; display:grid; place-items:center;
  border-radius:14px; background:var(--grad-brand); color:var(--ink);
  font-family:var(--f-mono); font-weight:600; font-size:16px; letter-spacing:-.5px;
  box-shadow:0 8px 22px -8px rgba(212,175,55,.75);
  position:relative; overflow:hidden;
}
.brand-mark::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(200deg,rgba(255,255,255,.55),transparent 55%);
}
.brand-logo{display:block; flex:none; height:34px; width:auto}
.brand-logo img{display:block; height:100%; width:auto; filter:drop-shadow(0 1px 2px rgba(0,0,0,.45))}
.site-header.is-stuck .brand-logo{height:29px}
html[data-theme="light"] .brand-logo img{filter:drop-shadow(0 1px 1px rgba(8,23,43,.35))}
.brand-text{display:flex; flex-direction:column; line-height:1.25}
.brand-text strong{font-size:16.5px; font-weight:700; letter-spacing:-.2px}
.brand-text small{font-size:12.5px; color:var(--txt-3); font-weight:500}

/* nav */
.nav{position:relative; display:none; gap:4px}
.nav a{
  position:relative; padding:9px 15px; border-radius:var(--r-pill);
  font-size:15px; font-weight:500; color:var(--txt-2);
  transition:color .25s var(--ease), background .25s var(--ease);
}
.nav a:hover{color:var(--txt); background:var(--surface-2)}
.nav a.is-active{color:var(--txt)}
.nav a.is-active::before{
  content:""; position:absolute; inset-block-end:-1px; inset-inline-start:50%;
  width:0; height:0;
}
.nav-indicator{
  position:absolute; inset-block-end:-2px; left:0; height:2.5px; border-radius:99px;
  background:var(--grad-brand); box-shadow:0 0 10px rgba(212,175,55,.6);
  transition:transform .45s var(--ease), width .45s var(--ease), opacity .3s;
  opacity:0; width:0;
}

/* header actions */
.header-actions{display:flex; align-items:center; gap:9px; flex:none}
.icon-btn{
  width:42px; height:42px; display:grid; place-items:center;
  border-radius:12px; border:1px solid var(--line); background:var(--surface);
  color:var(--txt-2); font-size:17px;
  transition:all .3s var(--ease);
}
.icon-btn:hover{color:var(--txt); border-color:var(--line-2); background:var(--surface-2); transform:translateY(-2px)}
.lang-btn{width:auto; padding-inline:12px; gap:7px; display:inline-flex; font-family:var(--f-mono); font-size:13px; font-weight:600; letter-spacing:.5px}

#themeBtn .ico{width:19px; height:19px}
#themeBtn .ico-moon{display:none}
html[data-theme="light"] #themeBtn .ico-sun{display:none}
html[data-theme="light"] #themeBtn .ico-moon{display:block}

.burger .ico-close{display:none}
body.nav-open .burger .ico-burger{display:none}
body.nav-open .burger .ico-close{display:block}
.burger{display:grid}

/* the header CTA is desktop-only; keep it above .btn in specificity so the
   shared .btn{display:inline-flex} rule can't force it back on */
.site-header .header-cta{display:none}

/* buttons */
.btn{
  --pad-y:13px; --pad-x:24px;
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:var(--pad-y) var(--pad-x); border-radius:var(--r-pill);
  font-size:15.5px; font-weight:600; line-height:1;
  border:1px solid transparent; white-space:nowrap;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s, color .3s, border-color .3s;
}
.btn .ico{width:17px; height:17px; transition:transform .35s var(--ease)}
.btn-sm{--pad-y:11px; --pad-x:19px; font-size:14.5px}
.btn-block{width:100%}

.btn-primary{background:var(--grad-brand); color:var(--ink); box-shadow:0 14px 32px -14px rgba(212,175,55,.85)}
.btn-primary::before{
  content:""; position:absolute; inset:0; opacity:0;
  background:linear-gradient(115deg,var(--gold-200),var(--gold-400));
  transition:opacity .4s var(--ease);
}
.btn-primary:hover{transform:translateY(-3px); box-shadow:0 20px 40px -14px rgba(212,175,55,.95)}
.btn-primary:hover::before{opacity:1}
.btn-primary:hover .ico{transform:translateX(3px)}
html[dir="rtl"] .btn-primary:hover .ico{transform:translateX(-3px)}
.btn-primary > *{position:relative; z-index:1}

.btn-ghost{border-color:var(--line-2); color:var(--txt); background:var(--surface); backdrop-filter:blur(8px)}
.btn-ghost:hover{border-color:var(--navy-400); color:var(--navy-300); transform:translateY(-3px)}
.btn-ghost:hover .ico{transform:translateX(4px)}
html[dir="rtl"] .btn-ghost:hover .ico{transform:translateX(-4px)}
html[data-theme="light"] .btn-ghost:hover{color:var(--navy-700)}

/* --------------------------- 5. MOBILE NAV -------------------------------- */
.mobile-nav{
  position:fixed; inset:0; z-index:105;
  padding:110px var(--gut) 40px;
  background:var(--glass); backdrop-filter:blur(26px) saturate(150%);
  -webkit-backdrop-filter:blur(26px) saturate(150%);
  display:flex; flex-direction:column; justify-content:space-between;
  opacity:0; transform:translateY(-14px);
  transition:opacity .35s var(--ease), transform .45s var(--ease);
}
.mobile-nav[hidden]{display:none}
body.nav-open .mobile-nav{opacity:1; transform:none}
.mobile-nav nav{display:flex; flex-direction:column; gap:4px}
.mobile-nav nav a{
  display:flex; align-items:baseline; gap:16px; padding:16px 4px;
  border-block-end:1px solid var(--line);
  font-size:clamp(26px,7vw,34px); font-weight:700;
  opacity:0; transform:translateY(14px);
}
body.nav-open .mobile-nav nav a{animation:navIn .5s var(--ease) forwards}
body.nav-open .mobile-nav nav a:nth-child(1){animation-delay:.06s}
body.nav-open .mobile-nav nav a:nth-child(2){animation-delay:.12s}
body.nav-open .mobile-nav nav a:nth-child(3){animation-delay:.18s}
body.nav-open .mobile-nav nav a:nth-child(4){animation-delay:.24s}
body.nav-open .mobile-nav nav a:nth-child(5){animation-delay:.30s}
body.nav-open .mobile-nav nav a:nth-child(6){animation-delay:.36s}
@keyframes navIn{to{opacity:1; transform:none}}
.mobile-nav nav a span{font-family:var(--f-mono); font-size:13px; color:var(--navy-400); font-weight:600}
.mobile-nav nav a em{font-style:normal}
.mobile-nav nav a:active{color:var(--navy-300)}
.mobile-nav-foot{display:flex; flex-direction:column; gap:12px; padding-block-start:26px; border-block-start:1px solid var(--line)}
.mobile-nav-foot a{display:flex; align-items:center; gap:10px; color:var(--txt-2); font-size:15px}
.mobile-nav-foot .ico{width:17px; height:17px; color:var(--navy-400)}

/* ------------------------------- 6. HERO ---------------------------------- */
.hero{position:relative; padding-block:clamp(120px,15vw,168px) clamp(64px,8vw,96px); overflow:hidden}
.hero-bg{position:absolute; inset:0; z-index:0; pointer-events:none}
.orb{position:absolute; border-radius:50%; filter:blur(90px); opacity:.42}
html[data-theme="light"] .orb{opacity:.26}
.orb-1{width:min(46vw,560px); aspect-ratio:1; background:radial-gradient(circle,#2f5f9e,transparent 68%); inset-block-start:-8%; inset-inline-start:-10%; animation:drift1 22s var(--ease-io) infinite}
.orb-2{width:min(40vw,480px); aspect-ratio:1; background:radial-gradient(circle,#d4af37,transparent 66%); inset-block-start:22%; inset-inline-end:-12%; animation:drift2 26s var(--ease-io) infinite}
.orb-3{width:min(34vw,400px); aspect-ratio:1; background:radial-gradient(circle,#3a68a8,transparent 70%); inset-block-end:-14%; inset-inline-start:34%; animation:drift1 30s var(--ease-io) infinite reverse}
@keyframes drift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(4%,7%) scale(1.09)}}
@keyframes drift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-5%,6%) scale(1.12)}}
.grid-mask{
  position:absolute; inset:0;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 90% 65% at 50% 32%,#000 10%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 90% 65% at 50% 32%,#000 10%,transparent 78%);
  opacity:.5;
}

.hero-grid{position:relative; z-index:1; display:grid; gap:clamp(48px,6vw,72px); align-items:center}

.badge{
  display:inline-flex; align-items:center; gap:9px;
  padding:8px 17px 8px 15px; border-radius:var(--r-pill);
  background:var(--surface); border:1px solid var(--line-2);
  backdrop-filter:blur(10px);
  font-size:13.5px; font-weight:600; letter-spacing:.02em; color:var(--txt-2);
}
.badge-dot{
  width:8px; height:8px; border-radius:50%; background:var(--navy-400);
  box-shadow:0 0 0 0 rgba(95,140,196,.7); animation:pulse 2.4s infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(95,140,196,.65)}
  70%{box-shadow:0 0 0 11px rgba(95,140,196,0)}
  100%{box-shadow:0 0 0 0 rgba(95,140,196,0)}
}

.hero-title{margin-block:22px 0}
.hero-hello{display:block; font-size:clamp(15px,2vw,17px); font-weight:500; color:var(--txt-3); margin-block-end:6px; letter-spacing:.14em; text-transform:uppercase}
html[dir="rtl"] .hero-hello{letter-spacing:0; text-transform:none}
.hero-name{
  display:block; font-size:clamp(42px,8.6vw,88px); font-weight:700; letter-spacing:-.035em; line-height:1.02;
  background:var(--grad-ink); -webkit-background-clip:text; background-clip:text; color:transparent;
  padding-block-end:.06em;
}
html[dir="ltr"] .hero-name{background:var(--grad-ink); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero-name-ar{display:block; font-size:clamp(17px,2.6vw,22px); font-weight:600; color:var(--txt-3); margin-block-start:8px; letter-spacing:.04em}

.hero-role{display:flex; align-items:center; gap:10px; margin-block-start:22px; min-height:34px; font-size:clamp(16px,2.3vw,20px); font-weight:600; color:var(--txt)}
.rotator{
  position:relative; display:inline-block; color:var(--navy-300);
  transition:opacity .38s var(--ease), transform .38s var(--ease);
}
html[data-theme="light"] .rotator{color:var(--navy-700)}
.rotator.is-out{opacity:0; transform:translateY(-9px)}
.rotator::after{
  content:""; display:inline-block; width:2.5px; height:1.05em; margin-inline-start:5px;
  background:var(--gold-400); vertical-align:-.14em; animation:blink 1.15s steps(1) infinite;
}
@keyframes blink{50%{opacity:0}}

.hero-tagline{
  margin-block-start:16px; max-width:34ch;
  font-size:clamp(17px,2.2vw,20px); font-weight:500; line-height:1.6; color:var(--txt-2);
}
.hero-sub{margin-block-start:14px; max-width:52ch; color:var(--txt-3); font-size:16px; line-height:1.8}

.hero-btns{display:flex; flex-wrap:wrap; gap:13px; margin-block-start:32px}

.hero-meta{display:flex; flex-wrap:wrap; gap:8px 22px; margin-block-start:30px}
.hero-meta li{display:flex; align-items:center; gap:8px; font-size:14.5px; color:var(--txt-3)}
.hero-meta .ico{width:16px; height:16px; color:var(--navy-400)}
.hero-meta a:hover{color:var(--navy-300)}

.hero-stats{
  display:grid; grid-template-columns:repeat(2,1fr); gap:2px;
  margin-block-start:38px; padding:4px;
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:var(--grad-soft); overflow:hidden;
}
.hstat{padding:18px 20px; background:var(--bg); transition:background .35s var(--ease)}
html[data-theme="light"] .hstat{background:var(--bg-2)}
.hstat:hover{background:var(--surface)}
.hstat strong{
  display:flex; align-items:baseline; gap:1px;
  font-family:var(--f-mono); font-size:clamp(28px,4.4vw,38px); font-weight:600; line-height:1;
  font-variant-numeric:tabular-nums; letter-spacing:-.03em;
  background:var(--grad-ink); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hstat strong em{font-style:normal}
.hstat strong em.accent{font-size:.6em}
.hstat small{display:block; margin-block-start:7px; font-size:13px; color:var(--txt-3); font-weight:500; line-height:1.4}

/* portrait visual */
.hero-visual{display:flex; justify-content:center}
.portrait-wrap{position:relative; width:min(100%,428px); padding-block:6px}
.halo{position:absolute; border-radius:50%; filter:blur(46px)}
.halo-1{width:112%; aspect-ratio:1/1.28; inset-block-start:6%; inset-inline-start:-6%; background:radial-gradient(circle,rgba(58,104,168,.55),transparent 70%); animation:haloSpin 26s linear infinite}
.halo-2{width:78%;  aspect-ratio:1/1.1;  inset-block-start:26%; inset-inline-end:-8%; background:radial-gradient(circle,rgba(212,175,55,.40),transparent 70%); animation:haloSpin 20s linear infinite reverse}
@keyframes haloSpin{to{transform:rotate(360deg)}}
.ring-spin{
  position:absolute; inset-block-start:2%; inset-inline-start:50%; margin-inline-start:-48%;
  width:96%; aspect-ratio:1; border-radius:50%;
  background:conic-gradient(from 0deg,transparent 0deg,var(--navy-400) 70deg,transparent 140deg,transparent 220deg,var(--gold-400) 290deg,transparent 350deg);
  mask:radial-gradient(circle,transparent 0 66%,#000 66.5% 68%,transparent 68.5%);
  -webkit-mask:radial-gradient(circle,transparent 0 66%,#000 66.5% 68%,transparent 68.5%);
  animation:ringSpin 16s linear infinite; opacity:.8; pointer-events:none;
}
@keyframes ringSpin{to{transform:rotate(360deg)}}

.portrait-card{
  position:relative; z-index:2;
  width:84%; margin-inline:auto;
  padding:14px 14px 20px;
  display:flex; flex-direction:column; gap:14px;
  border-radius:var(--r-xl); border:1px solid var(--line-2);
  background:linear-gradient(160deg,var(--surface-2),var(--surface));
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.portrait-card::before{
  content:""; position:absolute; inset:0; padding:1px; border-radius:inherit;
  background:var(--grad-brand);
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite:exclude; -webkit-mask-composite:xor;
  opacity:.9;
}

/* --- photo ---------------------------------------------------------------- */
.pc-photo{
  position:relative; border-radius:20px; overflow:hidden;
  aspect-ratio:1000/1331; background:var(--navy-900);
  box-shadow:0 18px 40px -18px rgba(0,0,0,.65);
}
html[data-theme="light"] .pc-photo{box-shadow:0 18px 40px -20px rgba(12,38,74,.4)}
.pc-photo img{width:100%; height:100%; object-fit:cover; object-position:center 22%}
.pc-photo-sheen{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(190deg,rgba(255,255,255,.22) 0%,transparent 34%),
    linear-gradient(0deg,rgba(8,20,38,.55) 0%,transparent 42%);
}

/* QR badge sitting on the photo */
.pc-qr{
  position:absolute; inset-block-end:12px; inset-inline-end:12px; z-index:3;
  display:grid; place-items:center; padding:5px; border-radius:14px;
  background:#fff; box-shadow:0 10px 26px -8px rgba(0,0,0,.6);
  line-height:0; transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.pc-qr img{width:clamp(52px,9vw,64px); height:auto; aspect-ratio:1}
.pc-qr:hover{transform:translateY(-4px) scale(1.05); box-shadow:0 16px 34px -10px rgba(212,175,55,.7)}
.pc-qr-ring{
  position:absolute; inset:-6px; border-radius:19px; pointer-events:none;
  border:1.5px solid rgba(95,140,196,.85);
  animation:qrPing 2.8s var(--ease-io) infinite;
}
@keyframes qrPing{0%{opacity:.9; transform:scale(.94)}70%{opacity:0; transform:scale(1.18)}100%{opacity:0; transform:scale(1.18)}}

/* --- body ----------------------------------------------------------------- */
.pc-body{display:flex; flex-direction:column; align-items:center; text-align:center; padding-inline:4px}
.pc-name{font-size:clamp(20px,3vw,24px); font-weight:700; letter-spacing:-.4px; line-height:1.25}
.pc-role{margin-block-start:2px; font-size:13.5px; color:var(--txt-3); font-weight:500}
.pc-chiprow{display:flex; flex-wrap:wrap; gap:7px; justify-content:center; margin-block-start:12px}
.pc-chip{
  display:inline-flex; align-items:center; gap:5px;
  padding:5px 11px; border-radius:var(--r-pill);
  background:rgba(58,104,168,.14); border:1px solid rgba(95,140,196,.32);
  font-size:11.5px; font-weight:600; color:var(--navy-300);
}
.pc-chip-alt{background:rgba(212,175,55,.14); border-color:rgba(227,193,92,.32); color:var(--gold-300)}
html[data-theme="light"] .pc-chip{color:var(--navy-700)}
html[data-theme="light"] .pc-chip-alt{color:var(--gold-600)}
.pc-chip .ico{width:13px; height:13px}
.pc-facts{display:grid; grid-template-columns:1fr 1fr; gap:14px; width:100%; margin-block-start:16px;
  padding-block-start:14px; border-block-start:1px solid var(--line)}
.pc-facts strong{display:block; font-family:var(--f-mono); font-size:21px; font-weight:600; color:var(--txt); line-height:1.1}
.pc-facts small{display:block; font-size:11.5px; color:var(--txt-3); line-height:1.45; margin-block-start:3px}

.float-card{
  position:absolute; z-index:3;
  display:flex; align-items:center; gap:9px;
  padding:10px 14px; border-radius:var(--r-md);
  border:1px solid var(--line-2); background:var(--glass);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:var(--shadow-sm);
  animation:bob 6s var(--ease-io) infinite;
}
.float-card .ico{width:20px; height:20px; color:var(--gold-400)}
.float-card strong{display:block; font-family:var(--f-mono); font-size:14.5px; font-weight:600; line-height:1.1; font-variant-numeric:tabular-nums}
.float-card small{display:block; font-size:11px; color:var(--txt-3); line-height:1.35; margin-block-start:2px; white-space:nowrap}
.fc-1{inset-block-start:12%;  inset-inline-start:-2%; animation-delay:0s}
.fc-2{inset-block-start:44%;  inset-inline-end:-4%;   animation-delay:1.6s}
.fc-3{inset-block-end:26%;  inset-inline-start:-4%; animation-delay:3.1s}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}
@media (max-width:420px){ .fc-3{display:none} }

.scroll-cue{
  display:none; align-items:center; gap:11px; margin-block-start:52px;
  font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--txt-3);
}
html[dir="rtl"] .scroll-cue{letter-spacing:0; text-transform:none}
.scroll-cue-line{position:relative; width:52px; height:1.5px; background:var(--line-2); overflow:hidden; border-radius:99px}
.scroll-cue-line::after{
  content:""; position:absolute; inset:0; width:40%; background:var(--grad-brand); border-radius:99px;
  animation:cueSlide 2s var(--ease-io) infinite;
}
@keyframes cueSlide{0%{transform:translateX(-110%)}100%{transform:translateX(260%)}}
html[dir="rtl"] .scroll-cue-line::after{animation-name:cueSlideRtl}
@keyframes cueSlideRtl{0%{transform:translateX(110%)}100%{transform:translateX(-260%)}}

/* ---------------------------- 7. MARQUEE ---------------------------------- */
.marquee-band{
  position:relative; overflow:hidden; padding-block:20px;
  border-block:1px solid var(--line);
  background:var(--grad-soft);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.marquee{display:flex; gap:14px; width:max-content; animation:scrollX 46s linear infinite}
.marquee:hover{animation-play-state:paused}
html[dir="rtl"] .marquee{animation-direction:reverse}
@keyframes scrollX{to{transform:translateX(-50%)}}
html[dir="rtl"] .marquee{animation-name:scrollX}
html[dir="rtl"] @keyframes scrollX{to{transform:translateX(50%)}}
.mq-item{
  display:inline-flex; align-items:center; gap:8px; flex:none;
  padding:9px 18px; border-radius:var(--r-pill);
  border:1px solid var(--line-2); background:var(--surface);
  font-size:14px; font-weight:600; color:var(--txt-2); white-space:nowrap;
}
.mq-item::before{content:""; width:5px; height:5px; border-radius:50%; background:var(--grad-brand); flex:none}

/* --------------------------- 8. SECTION SHELL ----------------------------- */
.section{padding-block:var(--sec-y); position:relative}
.section-alt{background:var(--bg-2); border-block:1px solid var(--line)}
html[data-theme="light"] .section-alt{background:#eef6f5}

.section-head{max-width:66ch; margin-block-end:clamp(38px,5vw,60px)}
.eyebrow{display:flex; align-items:center; gap:12px; margin-block-end:16px; font-size:13px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--navy-400)}
html[dir="rtl"] .eyebrow{letter-spacing:0}
html[data-theme="light"] .eyebrow{color:var(--navy-700)}
.eyebrow-line{width:38px; height:2px; background:var(--grad-brand); border-radius:99px; flex:none}

.section-title{font-size:clamp(30px,5.2vw,52px); font-weight:700; letter-spacing:-.028em}
html[dir="rtl"] .section-title{letter-spacing:0; line-height:1.36}
.section-title em{
  font-style:normal;
  background:var(--grad-ink); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.section-lead{margin-block-start:18px; font-size:17px; color:var(--txt-2); max-width:60ch}

/* panels */
.panel{
  position:relative; padding:clamp(22px,3vw,30px);
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:var(--surface); backdrop-filter:blur(12px);
  box-shadow:var(--shadow-sm); overflow:hidden;
}
.panel::before{content:""; position:absolute; inset-block-start:0; inset-inline:0; height:2px; background:var(--grad-brand); opacity:.85}
.panel-title{display:flex; align-items:center; gap:10px; font-size:17.5px; font-weight:700; margin-block-end:20px}
.panel-title .ico{width:20px; height:20px; color:var(--navy-400)}
.panel-accent{background:var(--grad-soft)}
.panel-accent::before{opacity:1}

.chip-row{display:flex; flex-wrap:wrap; gap:8px}
.chip{
  display:inline-flex; align-items:center;
  padding:8px 15px; border-radius:var(--r-pill);
  border:1px solid var(--line-2); background:var(--surface);
  font-size:13.5px; font-weight:500; color:var(--txt-2);
  transition:all .3s var(--ease);
}
.chip:hover{transform:translateY(-2px); color:var(--txt); border-color:var(--navy-400); background:rgba(58,104,168,.12)}
.chip-role{background:var(--grad-brand); color:var(--ink); border-color:transparent; font-weight:700}
.chip-role:hover{background:var(--grad-brand); color:var(--ink); filter:brightness(1.08)}
.chip-sm{padding:6px 12px; font-size:12.5px}

/* ------------------------------ 9. ABOUT ---------------------------------- */
.about-grid{display:grid; gap:clamp(28px,4vw,44px)}
.about-text .lead{font-size:19px; font-weight:500; color:var(--txt); line-height:1.75}
html[dir="rtl"] .about-text .lead{line-height:1.9}
.about-text p{margin-block-start:16px; color:var(--txt-2)}
.about-text p.lead{margin-block-start:0; color:var(--txt)}
.open-roles{margin-block-start:30px; padding-block-start:26px; border-block-start:1px solid var(--line)}
.open-roles-label{font-size:14.5px; font-weight:600; color:var(--txt-3); margin-block-end:13px}
.about-expertise{display:flex; flex-direction:column; gap:18px}
.expertise-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:10px}
.exp-item{
  display:flex; align-items:flex-start; gap:9px;
  padding:11px 13px; border-radius:var(--r-sm);
  border:1px solid var(--line); background:var(--surface-2);
  font-size:13.5px; font-weight:500; color:var(--txt-2); line-height:1.45;
  transition:all .3s var(--ease);
}
.exp-item:hover{border-color:var(--navy-400); color:var(--txt); transform:translateX(calc(var(--dir-x,1) * 3px))}
html[dir="rtl"] .exp-item:hover{transform:translateX(-3px)}
.exp-item .ico{width:15px; height:15px; color:var(--navy-400); margin-block-start:3px}

/* ------------------------------ 10. IMPACT -------------------------------- */
.impact-grid{display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.impact-card{
  position:relative; padding:clamp(24px,3vw,32px);
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:var(--surface); backdrop-filter:blur(12px);
  box-shadow:var(--shadow-sm); overflow:hidden;
  transition:transform .4s var(--ease), border-color .4s, box-shadow .4s;
  transform-style:preserve-3d;
}
.impact-card::before{
  content:""; position:absolute; inset-block-start:0; inset-inline:0; height:3px;
  background:var(--grad-brand); transform:scaleX(0); transform-origin:inline-start;
  transition:transform .55s var(--ease);
}
.impact-card:hover{transform:translateY(-6px); border-color:var(--line-2); box-shadow:var(--shadow)}
.impact-card:hover::before{transform:scaleX(1)}
.ic-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-block-end:20px}
.ic-icon{
  width:48px; height:48px; display:grid; place-items:center; border-radius:14px;
  background:var(--grad-soft); border:1px solid var(--line-2); color:var(--navy-400);
}
.ic-icon .ico{width:22px; height:22px}
.ic-delta{
  padding:5px 12px; border-radius:var(--r-pill);
  font-family:var(--f-mono); font-size:12px; font-weight:600; letter-spacing:.02em;
}
.ic-good{background:rgba(95,140,196,.14); border:1px solid rgba(95,140,196,.3); color:var(--navy-300)}
html[data-theme="light"] .ic-good{color:var(--navy-700)}
.ic-neutral{background:rgba(212,175,55,.13); border:1px solid rgba(212,175,55,.28); color:var(--gold-300)}
html[data-theme="light"] .ic-neutral{color:var(--gold-600)}

.ic-metric{display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; margin-block-end:12px; font-family:var(--f-mono); font-variant-numeric:tabular-nums}
.ic-metric .from{font-size:clamp(22px,3vw,27px); font-weight:500; color:var(--txt-3); text-decoration:line-through; text-decoration-color:rgba(249,115,22,.65); text-decoration-thickness:2.5px; opacity:.85}
.ic-metric .arrow{font-size:20px; color:var(--gold-400); transform:translateY(-2px)}
.ic-metric .to{
  font-size:clamp(38px,5.4vw,52px); font-weight:600; line-height:1; letter-spacing:-.04em;
  background:var(--grad-ink); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.ic-metric .unit{font-size:17px; font-weight:600; color:var(--txt-2)}
.impact-card h3{font-size:19px; font-weight:700; margin-block-end:9px}
.impact-card p{font-size:14.8px; color:var(--txt-3); line-height:1.75}

/* ---------------------------- 11. DIGITAL --------------------------------- */
.digital-grid{display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(min(100%,310px),1fr))}
.digital-card{
  position:relative; padding:clamp(26px,3.2vw,34px);
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:var(--surface); backdrop-filter:blur(12px);
  box-shadow:var(--shadow-sm); overflow:hidden;
  transition:transform .4s var(--ease), border-color .4s, box-shadow .4s;
}
.digital-card:hover{transform:translateY(-6px); border-color:rgba(95,140,196,.42); box-shadow:var(--shadow)}
.dc-num{
  position:absolute; inset-block-start:16px; inset-inline-end:20px;
  font-family:var(--f-mono); font-size:44px; font-weight:600; line-height:1;
  color:transparent; -webkit-text-stroke:1px var(--line-2); opacity:.75;
}
.dc-icon{
  display:grid; place-items:center; width:52px; height:52px; margin-block-end:18px;
  border-radius:15px; background:var(--grad-brand); color:var(--ink);
  box-shadow:0 12px 28px -12px rgba(212,175,55,.8);
}
.dc-icon .ico{width:24px; height:24px; stroke-width:1.9}
.digital-card h3{font-size:19.5px; font-weight:700; margin-block-end:11px}
.digital-card p{font-size:14.8px; color:var(--txt-3); line-height:1.78}
.digital-card .chip-row{margin-block-start:16px}
.digital-card--cta{
  background:var(--grad-soft); border-color:var(--line-2);
  display:flex; flex-direction:column; align-items:flex-start; gap:0;
}
.digital-card--cta p{margin-block-end:20px}
.digital-card--cta .btn{margin-block-start:auto}

/* --------------------------- 12. EXPERIENCE ------------------------------- */
.filter-bar{display:flex; flex-wrap:wrap; gap:9px; margin-block-end:clamp(30px,4vw,44px)}
.filter-btn{
  padding:10px 20px; border-radius:var(--r-pill);
  border:1px solid var(--line-2); background:var(--surface);
  font-size:14.5px; font-weight:600; color:var(--txt-2);
  transition:all .3s var(--ease);
}
.filter-btn:hover{color:var(--txt); border-color:var(--navy-400); transform:translateY(-2px)}
.filter-btn.is-active{background:var(--grad-brand); color:var(--ink); border-color:transparent; box-shadow:0 10px 24px -12px rgba(212,175,55,.85)}

.timeline{position:relative; padding-inline-start:38px}
html[dir="rtl"] .timeline{padding-inline-start:38px}
.timeline::before{
  content:""; position:absolute; inset-block:8px; inset-inline-start:11px; width:2px;
  background:linear-gradient(var(--navy-400),rgba(227,193,92,.55) 55%,transparent);
  border-radius:99px;
}
.tl-item{position:relative; margin-block-end:20px; padding:clamp(22px,3vw,30px);
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:var(--surface); backdrop-filter:blur(12px);
  transition:transform .4s var(--ease), border-color .4s, box-shadow .4s, opacity .35s;
}
.tl-item.is-hidden{display:none}
.tl-item:hover{transform:translateY(-4px); border-color:var(--line-2); box-shadow:var(--shadow-sm)}
.tl-item.is-featured{border-color:rgba(95,140,196,.35); background:linear-gradient(160deg,var(--surface-2),var(--surface))}
.tl-item.is-featured::before{
  content:""; position:absolute; inset-block-start:0; inset-inline:0; height:3px;
  background:var(--grad-brand); border-radius:var(--r-lg) var(--r-lg) 0 0;
}
.tl-dot{
  position:absolute; inset-block-start:30px; inset-inline-start:-38px;
  width:24px; height:24px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--bg-2); border:2px solid var(--navy-400);
  transition:all .35s var(--ease);
}
.tl-dot::after{content:""; width:8px; height:8px; border-radius:50%; background:var(--navy-400); transition:all .35s var(--ease)}
.tl-item.is-featured .tl-dot{border-color:var(--gold-400); box-shadow:0 0 0 5px rgba(212,175,55,.14)}
.tl-item.is-featured .tl-dot::after{background:var(--gold-400)}
.tl-item:hover .tl-dot{transform:scale(1.18); box-shadow:0 0 0 6px rgba(95,140,196,.16)}

.tl-head{display:flex; flex-wrap:wrap; gap:12px 20px; align-items:flex-start; justify-content:space-between}
.tl-company{font-size:21px; font-weight:700; letter-spacing:-.2px; line-height:1.35}
html[dir="rtl"] .tl-company{line-height:1.5}
.tl-role{margin-block-start:5px; font-size:15.5px; font-weight:600; color:var(--navy-300)}
html[data-theme="light"] .tl-role{color:var(--navy-700)}
.tl-badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 13px; border-radius:var(--r-pill);
  background:rgba(212,175,55,.13); border:1px solid rgba(227,193,92,.3);
  font-size:12px; font-weight:700; color:var(--gold-300); white-space:nowrap;
}
html[data-theme="light"] .tl-badge{color:var(--gold-600)}
.tl-meta{display:flex; flex-wrap:wrap; gap:8px 20px; margin-block:16px; padding-block:14px; border-block:1px solid var(--line)}
.tl-meta li{display:flex; align-items:center; gap:7px; font-size:13.5px; color:var(--txt-3)}
.tl-meta .ico{width:15px; height:15px; color:var(--navy-400)}

.tl-points{display:flex; flex-direction:column; gap:11px}
.tl-points li{display:flex; align-items:flex-start; gap:11px; font-size:15px; color:var(--txt-2); line-height:1.72}
html[dir="rtl"] .tl-points li{line-height:1.85}
.tl-points .tick{
  flex:none; width:21px; height:21px; margin-block-start:5px; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(58,104,168,.14); border:1px solid rgba(95,140,196,.28); color:var(--navy-300);
}
html[data-theme="light"] .tl-points .tick{color:var(--navy-700)}
.tl-points .tick .ico{width:11px; height:11px; stroke-width:3}

.tl-more{
  margin-block-start:16px; display:inline-flex; align-items:center; gap:7px;
  font-size:14px; font-weight:700; color:var(--navy-300);
}
html[data-theme="light"] .tl-more{color:var(--navy-700)}
.tl-more .ico{width:16px; height:16px; transition:transform .4s var(--ease)}
.tl-more:hover .ico{transform:translateY(3px)}
.tl-item.is-open .tl-more .ico{transform:rotate(180deg)}
.tl-item.is-open .tl-more:hover .ico{transform:rotate(180deg) translateY(-3px)}
.tl-chips{margin-block-start:18px; padding-block-start:16px; border-block-start:1px solid var(--line)}

.tl-body{max-height:0; overflow:hidden; transition:max-height .6s var(--ease)}
.tl-item.is-open .tl-body{max-height:2600px}
.tl-body-inner{padding-block-start:18px}

/* ----------------------------- 13. SKILLS --------------------------------- */
.skills-grid{display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))}
.skill-card{
  padding:clamp(24px,3vw,30px);
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:var(--surface); backdrop-filter:blur(12px);
  box-shadow:var(--shadow-sm);
  transition:transform .4s var(--ease), border-color .4s, box-shadow .4s;
}
.skill-card:hover{transform:translateY(-5px); border-color:rgba(95,140,196,.38); box-shadow:var(--shadow)}
.sk-head{display:flex; align-items:center; gap:12px; margin-block-end:20px; padding-block-end:16px; border-block-end:1px solid var(--line)}
.sk-icon{
  width:44px; height:44px; flex:none; display:grid; place-items:center; border-radius:13px;
  background:var(--grad-soft); border:1px solid var(--line-2); color:var(--navy-400);
}
.sk-icon .ico{width:21px; height:21px}
.sk-head h3{font-size:17px; font-weight:700; line-height:1.4}
.sk-count{font-family:var(--f-mono); font-size:12px; color:var(--txt-3); margin-block-start:3px}
.skill-items{display:flex; flex-direction:column; gap:9px}
.skill-items li{display:flex; align-items:center; gap:9px; font-size:14.5px; color:var(--txt-2); line-height:1.5}
.skill-items .bullet{width:5px; height:5px; flex:none; border-radius:50%; background:var(--grad-brand)}
.skill-items li:hover{color:var(--txt)}

/* ---------------------------- 14. EDUCATION ------------------------------- */
.edu-grid{display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.edu-card{
  position:relative; padding:clamp(26px,3.2vw,34px);
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:var(--surface); backdrop-filter:blur(12px); box-shadow:var(--shadow-sm);
  transition:transform .4s var(--ease), border-color .4s, box-shadow .4s;
}
.edu-card:hover{transform:translateY(-5px); border-color:var(--line-2); box-shadow:var(--shadow)}
.edu-icon{
  display:grid; place-items:center; width:52px; height:52px; margin-block-end:18px;
  border-radius:15px; background:var(--grad-brand); color:var(--ink);
  box-shadow:0 12px 28px -12px rgba(212,175,55,.8);
}
.edu-icon .ico{width:24px; height:24px; stroke-width:1.9}
.edu-card h3{font-size:20px; font-weight:700}
.edu-degree{margin-block-start:7px; font-size:15.5px; font-weight:600; color:var(--navy-300)}
html[data-theme="light"] .edu-degree{color:var(--navy-700)}
.edu-facts{display:flex; flex-direction:column; gap:9px; margin-block-start:16px; padding-block-start:16px; border-block-start:1px solid var(--line)}
.edu-facts li{display:flex; align-items:center; gap:9px; font-size:14px; color:var(--txt-3)}
.edu-facts .ico{width:15px; height:15px; color:var(--navy-400)}
.edu-card p{font-size:14.8px; color:var(--txt-3); line-height:1.78; margin-block-start:14px}
.edu-card--wide .chip-row{margin-block-start:18px}
.edu-note{margin-block-start:16px; font-size:13px; color:var(--txt-3); font-style:italic; opacity:.85}
.edu-link{
  display:inline-flex; align-items:center; gap:7px; font-style:normal;
  font-size:13.5px; font-weight:700; color:var(--navy-300);
  transition:color .25s var(--ease);
}
html[data-theme="light"] .edu-link{color:var(--navy-700)}
.edu-link .ico{width:15px; height:15px; transition:transform .3s var(--ease)}
html[dir="rtl"] .edu-link .ico{transform:scaleX(-1)}
.edu-link:hover{color:var(--gold-400)}
html[data-theme="light"] .edu-link:hover{color:var(--gold-700)}

/* ------------------------ 14b. CERTIFICATIONS ----------------------------- */
.cert-count{margin-block:0 18px; font-family:var(--f-mono); font-size:13px; color:var(--txt-3); letter-spacing:.01em}
.cert-grid{display:grid; gap:18px; grid-template-columns:repeat(auto-fill,minmax(min(100%,266px),1fr))}

.cert-card{
  position:relative;
  display:flex; flex-direction:column; width:100%; text-align:start; padding:0;
  overflow:hidden; color:inherit;
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:var(--surface); backdrop-filter:blur(12px);
  box-shadow:var(--shadow-sm);
  transition:transform .4s var(--ease), border-color .4s, box-shadow .4s;
}
.cert-card.is-hidden{display:none}
.cert-card:hover{transform:translateY(-5px); border-color:var(--line-2); box-shadow:var(--shadow)}
.cert-card.is-featured{border-color:rgba(212,175,55,.42)}
.cert-card.is-featured::after{
  content:""; position:absolute; inset-block-start:0; inset-inline:0; height:3px;
  background:var(--grad-brand);
}

.cert-media{
  position:relative; display:block; aspect-ratio:4 / 3; overflow:hidden;
  background:linear-gradient(150deg,#0b1a2f,#13294b);
}
.cert-media::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
}
.cert-media img{
  width:100%; height:100%; display:block; object-fit:contain; object-position:center;
  transition:transform .6s var(--ease);
}
.cert-card:hover .cert-media img{transform:scale(1.035)}

.cert-badge{
  position:absolute; inset-block-start:11px; inset-inline-start:11px; z-index:2;
  display:inline-flex; align-items:center; gap:5px;
  padding:4px 10px; border-radius:var(--r-pill);
  background:rgba(8,20,38,.80); border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(8px);
  font-size:11px; font-weight:600; color:#eaf1fb;
}
.cert-badge .ico{width:12px; height:12px; color:var(--gold-400)}
.cert-star{
  position:absolute; inset-block-start:11px; inset-inline-end:11px; z-index:2;
  width:30px; height:30px; display:grid; place-items:center; border-radius:50%;
  background:var(--grad-brand); color:var(--ink);
  box-shadow:0 6px 18px -6px rgba(212,175,55,.85);
}
.cert-star .ico{width:16px; height:16px; stroke-width:2}
.cert-zoom{
  position:absolute; inset-block-end:10px; inset-inline-end:10px; z-index:2;
  width:34px; height:34px; display:grid; place-items:center; border-radius:11px;
  background:rgba(8,20,38,.72); border:1px solid rgba(255,255,255,.18); color:#eaf1fb;
  opacity:0; transform:translateY(6px); transition:opacity .35s var(--ease), transform .35s var(--ease);
}
.cert-zoom .ico{width:16px; height:16px}
.cert-card:hover .cert-zoom,.cert-card:focus-visible .cert-zoom{opacity:1; transform:none}

.cert-body{display:flex; flex-direction:column; gap:6px; padding:16px 17px 18px}
.cert-title{font-size:15.5px; font-weight:700; line-height:1.42}
html[dir="rtl"] .cert-title{line-height:1.6}
.cert-issuer{font-size:13px; font-weight:600; color:var(--navy-300)}
html[data-theme="light"] .cert-issuer{color:var(--navy-700)}
.cert-meta{font-size:12.5px; font-family:var(--f-mono); color:var(--txt-3); line-height:1.6}

/* ---- lightbox ---- */
.lightbox{position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:clamp(14px,4vw,44px)}
.lightbox[hidden]{display:none}
.lb-backdrop{position:absolute; inset:0; background:rgba(4,10,20,.74); backdrop-filter:blur(6px)}
.lb-panel{
  position:relative; z-index:1; width:min(100%,940px); max-height:92vh;
  display:flex; flex-direction:column; overflow:hidden;
  border:1px solid var(--line-2); border-radius:var(--r-lg);
  background:var(--bg-2); box-shadow:var(--shadow);
  animation:lbPop .3s var(--ease);
}
@keyframes lbPop{from{opacity:0; transform:translateY(14px) scale(.98)}}
.lb-figure{margin:0; min-height:0; display:grid; place-items:center; overflow:auto; background:#0a1626}
.lb-figure img{display:block; max-width:100%; max-height:min(70vh,760px); width:auto; height:auto; object-fit:contain}
.lb-info{padding:18px 22px 22px; border-block-start:1px solid var(--line)}
.lb-tag{
  display:inline-block; margin-block-end:8px; padding:4px 11px; border-radius:var(--r-pill);
  background:var(--grad-soft); border:1px solid var(--line-2);
  font-size:11.5px; font-weight:700; color:var(--navy-300);
}
html[data-theme="light"] .lb-tag{color:var(--navy-700)}
.lb-info h3{font-size:19px; font-weight:700; line-height:1.42}
html[dir="rtl"] .lb-info h3{line-height:1.6}
.lb-issuer{margin-block-start:5px; font-size:14px; font-weight:600; color:var(--txt-2)}
.lb-meta{margin-block-start:7px; font-size:13px; font-family:var(--f-mono); color:var(--txt-3)}
.lb-close{
  position:absolute; inset-block-start:12px; inset-inline-end:12px; z-index:3;
  width:42px; height:42px; display:grid; place-items:center; border-radius:12px;
  border:1px solid rgba(255,255,255,.2); background:rgba(8,20,38,.72);
  color:#fff; backdrop-filter:blur(8px);
  transition:background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.lb-close:hover{background:var(--gold-400); color:var(--ink); transform:rotate(90deg)}
.lb-close .ico{width:18px; height:18px}
body.lb-open{overflow:hidden}

/* ----------------------------- 15. CONTACT -------------------------------- */
.contact-grid{display:grid; gap:clamp(24px,3.4vw,40px)}
.contact-form{
  padding:clamp(26px,3.4vw,38px);
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:var(--surface); backdrop-filter:blur(12px); box-shadow:var(--shadow-sm);
}
.field{margin-block-end:18px}
.field label{display:block; margin-block-end:8px; font-size:14px; font-weight:600; color:var(--txt-2)}
.field input,.field textarea{
  width:100%; padding:13px 16px; border-radius:var(--r-md);
  border:1px solid var(--line-2); background:var(--surface-2);
  color:var(--txt); font-size:15.5px; line-height:1.6;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease), background .3s;
  resize:vertical;
}
.field input::placeholder,.field textarea::placeholder{color:var(--txt-3); opacity:.75}
.field input:focus,.field textarea:focus{
  outline:none; border-color:var(--navy-400);
  box-shadow:0 0 0 4px rgba(95,140,196,.14);
  background:var(--surface);
}
.err{display:none; margin-block-start:6px; font-size:12.5px; color:var(--orange-500); font-weight:500}
.field.has-error input,.field.has-error textarea{border-color:var(--orange-500)}
.field.has-error .err{display:block}
.form-foot{margin-block-start:14px; font-size:13px; color:var(--txt-3); text-align:center}

.contact-aside{display:flex; flex-direction:column; gap:18px}

/* ---- QR panel ---- */
.panel-qr{
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(58,104,168,.16), transparent 60%),
    var(--surface);
}
.qr-block{display:flex; flex-direction:column; align-items:center; gap:14px}
.qr-frame{
  position:relative; display:grid; place-items:center;
  padding:13px; border-radius:var(--r-md); background:#fff;
  box-shadow:0 16px 34px -14px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.28);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.qr-frame:hover{transform:translateY(-5px); box-shadow:0 24px 46px -16px rgba(212,175,55,.75), 0 0 0 1px rgba(95,140,196,.5)}
.qr-frame img{width:clamp(146px,34vw,178px); height:auto; aspect-ratio:1; display:block}
/* animated corner brackets */
.qr-corner{position:absolute; width:19px; height:19px; border:2.5px solid var(--navy-400); opacity:.95}
html[data-theme="light"] .qr-corner{border-color:var(--navy-600)}
.qr-corner.tl{inset-block-start:-7px; inset-inline-start:-7px; border-inline-end:0; border-block-end:0; border-start-start-radius:9px}
.qr-corner.tr{inset-block-start:-7px; inset-inline-end:-7px;  border-inline-start:0; border-block-end:0; border-start-end-radius:9px}
.qr-corner.bl{inset-block-end:-7px;  inset-inline-start:-7px; border-inline-end:0; border-block-start:0; border-end-start-radius:9px}
.qr-corner.br{inset-block-end:-7px;  inset-inline-end:-7px;  border-inline-start:0; border-block-start:0; border-end-end-radius:9px}
.qr-frame:hover .qr-corner{animation:cornerPulse 1.5s var(--ease-io) infinite}
.qr-frame:hover .qr-corner.tr{animation-delay:.12s}
.qr-frame:hover .qr-corner.bl{animation-delay:.24s}
.qr-frame:hover .qr-corner.br{animation-delay:.36s}
@keyframes cornerPulse{0%,100%{opacity:.95; transform:scale(1)}50%{opacity:.35; transform:scale(.86)}}
.qr-cap{font-size:13.5px; line-height:1.65; color:var(--txt-3); text-align:center; max-width:34ch}
.qr-btn{margin-block-start:16px}
.qr-btn .ico{width:15px; height:15px}

/* ---- signature sign-off ---- */
.signoff{
  margin-block-start:clamp(34px,4.5vw,54px);
  padding:clamp(26px,3.4vw,38px) clamp(20px,3vw,44px);
  border:1px solid var(--line); border-radius:var(--r-xl);
  background:var(--grad-soft);
  display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center;
  position:relative; overflow:hidden;
}
.signoff::before{
  content:""; position:absolute; inset-block-start:0; inset-inline:22%; height:2px;
  background:var(--grad-brand);
}
.sig{display:block; width:min(100%,420px); margin:0}
.sig img{display:block; width:100%; height:auto; opacity:.97; filter:drop-shadow(0 2px 7px rgba(0,0,0,.4))}
html[data-theme="light"] .sig img{filter:drop-shadow(0 1px 2px rgba(8,23,43,.3))}
.signoff-note{font-size:15.5px; color:var(--txt-2); max-width:58ch; line-height:1.8}
.signoff-note::before{content:"“  "}
.signoff-note::after{content:"  ”"}
.contact-list{display:flex; flex-direction:column; gap:16px}
.contact-list li{display:flex; align-items:center; gap:14px}
.ci{
  width:46px; height:46px; flex:none; display:grid; place-items:center; border-radius:13px;
  background:var(--grad-soft); border:1px solid var(--line-2); color:var(--navy-400);
  transition:all .35s var(--ease);
}
.contact-list li:hover .ci{background:var(--grad-brand); color:var(--ink); transform:scale(1.06)}
.ci .ico{width:20px; height:20px}
.contact-list small{display:block; font-size:12.5px; color:var(--txt-3); line-height:1.4}
.contact-list a,.contact-list span.val{display:block; font-size:15px; font-weight:600; color:var(--txt); margin-block-start:2px; word-break:break-word}
.contact-list a:hover{color:var(--navy-300)}

/* ------------------------------ 16. FOOTER -------------------------------- */
.site-footer{position:relative; padding-block:clamp(48px,6vw,70px); border-block-start:1px solid var(--line); overflow:hidden; background:var(--bg-2)}
.footer-orb{
  position:absolute; inset-block-end:-60%; inset-inline-start:50%; transform:translateX(-50%);
  width:min(90vw,900px); aspect-ratio:2/1; border-radius:50%;
  background:radial-gradient(ellipse,rgba(58,104,168,.16),transparent 70%);
  filter:blur(50px); pointer-events:none;
}
.footer-inner{position:relative; z-index:1; display:flex; flex-direction:column; gap:26px; align-items:flex-start}
.footer-brand{display:flex; align-items:center; gap:14px}
.footer-brand strong{display:block; font-size:18px; font-weight:700}
.footer-brand p{font-size:13.5px; color:var(--txt-3); margin-block-start:3px}
.footer-links{display:flex; flex-wrap:wrap; gap:8px 22px}
.footer-links a{font-size:14.5px; font-weight:500; color:var(--txt-2); transition:color .25s}
.footer-links a:hover{color:var(--navy-300)}
.footer-copy{display:flex; flex-wrap:wrap; gap:6px 16px; padding-block-start:22px; border-block-start:1px solid var(--line); width:100%; font-size:13px; color:var(--txt-3)}

/* ----------------------------- 17. TO-TOP --------------------------------- */
.to-top{
  position:fixed; inset-block-end:24px; inset-inline-end:24px; z-index:100;
  width:48px; height:48px; display:grid; place-items:center; border-radius:15px;
  background:var(--grad-brand); color:var(--ink);
  box-shadow:0 14px 32px -12px rgba(212,175,55,.9);
  opacity:0; visibility:hidden; transform:translateY(16px) scale(.9);
  transition:all .4s var(--ease);
}
.to-top .ico{width:20px; height:20px; stroke-width:2.2}
.to-top.is-visible{opacity:1; visibility:visible; transform:none}
.to-top:hover{transform:translateY(-4px)}

/* -------------------------- 18. REVEAL ANIM ------------------------------- */
/* Only hide content when JS is actually running (html.js) so the page is
   never blank if scripts are blocked or fail. */
html.js .reveal{opacity:0; transform:translateY(26px); transition:opacity .75s var(--ease), transform .75s var(--ease)}
html.js .reveal.is-in{opacity:1; transform:none}
html.js[dir="rtl"] .reveal{transform:translateY(26px)}
html.js .reveal[data-delay="1"]{transition-delay:.09s}
html.js .reveal[data-delay="2"]{transition-delay:.18s}
html.js .reveal[data-delay="3"]{transition-delay:.27s}
html.js .reveal[data-delay="4"]{transition-delay:.36s}
html.js .reveal[data-delay="5"]{transition-delay:.45s}
html.js .reveal[data-delay="6"]{transition-delay:.54s}
html.js .reveal[data-delay="7"]{transition-delay:.63s}

/* ---------------------------- 19. RESPONSIVE ------------------------------ */
@media (min-width:640px){
  .hero-stats{grid-template-columns:repeat(4,1fr)}
  .hstat{padding:20px 18px}
}
@media (max-width:400px){
  /* the brand word-mark is the first thing to go so the three header
     controls (language / theme / menu) always stay reachable */
  .brand-text{display:none}
  .brand-logo{height:28px}
  .header-inner{gap:10px}
  .header-actions{gap:7px}
}
@media (min-width:900px){
  .scroll-cue{display:inline-flex}
  .about-grid{grid-template-columns:1.35fr 1fr}
  .contact-grid{grid-template-columns:1.2fr 1fr}
  .footer-inner{display:grid; grid-template-columns:auto 1fr; align-items:center; gap:24px 40px}
  .footer-links{justify-self:end}
  .footer-copy{grid-column:1/-1}
}
/* The inline nav + the two icon buttons + the CTA need ~1020px before they
   stop colliding, so the full header is a wide-screen layout and everything
   between the phone and desktop breakpoints uses the drawer. */
@media (min-width:1060px){
  .hero-grid{grid-template-columns:1.08fr .92fr}
  .nav{display:flex}
  .burger{display:none}
}
@media (min-width:1180px){
  .site-header .header-cta{display:inline-flex}
}

/* ----------------------------- 20. MOTION --------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  html.js .reveal{opacity:1; transform:none}
  .orb,.halo,.ring-spin{animation:none}
  .marquee{animation:none; transform:none}
  .float-card{animation:none}
}

/* ------------------------------ 21. PRINT --------------------------------- */
@media print{
  :root{--bg:#fff; --bg-2:#fff; --surface:#fff; --surface-2:#fff; --line:#ddd; --line-2:#ccc; --txt:#000; --txt-2:#333; --txt-3:#555; --shadow:none; --shadow-sm:none}
  html,body{background:#fff !important; color:#000 !important; font-size:11pt}
  .site-header,.mobile-nav,.to-top,.scroll-progress,.scroll-cue,.marquee-band,
  .hero-visual,.filter-bar,.contact-form,.hero-btns,.tl-more,.orb,.grid-mask{display:none !important}
  .hero{padding-block:0 18pt}
  .section{padding-block:18pt; break-inside:avoid}
  .section-alt{background:#fff}
  .reveal,html.js .reveal{opacity:1 !important; transform:none !important}
  .impact-card,.digital-card,.skill-card,.edu-card,.tl-item,.panel{
    border:1px solid #ddd !important; background:#fff !important;
    box-shadow:none !important; break-inside:avoid; backdrop-filter:none;
  }
  .tl-body{max-height:none !important}
  .tl-item.is-hidden{display:none !important}
  .hstat strong,.ic-metric .to,.pc-mono,.hero-name,.section-title em,.sk-head h3{
    -webkit-text-fill-color:#0a6b62; color:#0a6b62 !important;
  }
  .marquee-band{display:none}
  a[href^="http"]::after{content:" (" attr(href) ")"; font-size:8pt; color:#555}
  .contact-form a[href^="mailto"]::after{content:""}
}

/* ------------------- 22. GLOBAL BOLD (requested) -------------------------- */
/* All text, in both Arabic and English, is rendered bold. */
body, body *{font-weight:700 !important}