/* ============================================================
   FIDEM PRAXIS — MIDNIGHT EDITION stylesheet (wasimamin.us palette)
   Navy + gold institutional identity · editorial serif
   3D-forward multi-page site (modeled on premium legal-AI ref)
   ============================================================ */
:root{
  --navy:#050810; --navy-deep:#03050b; --surface:#0E1424;
  --gold:#C9A961; --gold-light:#E0C279; --ivory:#E8E4D6;
  --steel:#7593B8; --hairline:rgba(201,169,97,.18);
  --display:"Fraunces","Tiempos Headline",Georgia,serif;
  --body:"Source Serif 4","Lora",Georgia,serif;
  --label:"Inter",system-ui,-apple-system,sans-serif;
  --ar-serif:"Noto Naskh Arabic","Source Serif 4",serif;
  --maxw:1080px; --maxw-text:760px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--navy); color:var(--ivory);
  font-family:var(--body); font-size:18px; line-height:1.7;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
a{color:inherit; text-decoration:none}
img{max-width:100%}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px; position:relative; z-index:2}
.wrap-text{max-width:var(--maxw-text); margin:0 auto; padding:0 28px; position:relative; z-index:2}
h1,h2,h3{font-family:var(--display); font-weight:400; line-height:1.12; letter-spacing:-.01em}
h1{font-size:clamp(44px,8vw,78px); margin:0 0 10px}
h2{font-size:clamp(30px,5vw,46px); margin:.2em 0 .5em}
h3{font-size:22px; margin:0 0 .2em}
p{margin:0 0 1.1em}
em,i{font-style:italic}
.accent{color:var(--gold)}
.muted{color:var(--steel)}
.eyebrow{
  font-family:var(--label); font-size:12px; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:var(--steel);
}
.eyebrow .dot{color:var(--gold)}
.lead{font-size:clamp(20px,2.6vw,25px); line-height:1.45}

/* ---------- global 3D background ---------- */
#bg3d{
  position:fixed; inset:0; width:100%; height:100%;
  z-index:0; pointer-events:none;
}
main{position:relative; z-index:1}

/* ---------- nav ---------- */
nav.site{
  position:sticky; top:0; z-index:60;
  background:rgba(3,5,11,.8);
  backdrop-filter:saturate(150%) blur(10px);
  border-bottom:1px solid var(--hairline);
}
nav.site .bar{
  max-width:var(--maxw); margin:0 auto; padding:0 28px;
  display:flex; align-items:center; justify-content:space-between; height:66px; gap:18px;
}
.brand{display:flex; align-items:center; gap:12px}
.brand .mark{width:26px; height:26px; flex:0 0 auto}
.brand .name{
  font-family:var(--display); font-size:17px; letter-spacing:.16em; font-weight:500;
  white-space:nowrap;
}
.brand .name span{color:var(--gold)}
.navlinks{display:flex; gap:24px; font-family:var(--label); font-size:13px; letter-spacing:.03em; color:var(--steel)}
.navlinks a{padding:6px 2px; border-bottom:1px solid transparent; transition:.15s}
.navlinks a:hover{color:var(--gold)}
.navlinks a.active{color:var(--ivory); border-bottom-color:var(--gold)}
.navright{display:flex; align-items:center; gap:12px}
.langbtn{
  font-family:var(--label); font-size:12.5px; letter-spacing:.03em;
  color:var(--ivory); background:rgba(14,20,36,.7);
  border:1px solid var(--hairline); border-radius:999px;
  padding:8px 16px; cursor:pointer; display:flex; align-items:center; gap:8px; transition:.15s;
}
.langbtn:hover{border-color:var(--gold); color:var(--gold-light)}
.langbtn .globe{color:var(--gold)}
.cta-mini{
  font-family:var(--label); font-size:13px; letter-spacing:.03em;
  background:var(--gold); color:var(--navy-deep); font-weight:600;
  padding:10px 18px; border-radius:2px; transition:.15s;
  box-shadow:0 0 22px rgba(201,169,97,.25);
  white-space:nowrap;
}
.cta-mini:hover{background:var(--gold-light); box-shadow:0 0 30px rgba(201,169,97,.45)}
.menubtn{display:none; background:none; border:1px solid var(--hairline); border-radius:4px;
  color:var(--ivory); font-size:18px; padding:6px 12px; cursor:pointer}
@media(max-width:920px){
  .navlinks{
    display:none; position:absolute; top:66px; left:0; right:0;
    background:rgba(3,5,11,.97); border-bottom:1px solid var(--hairline);
    flex-direction:column; gap:0; padding:10px 28px 18px;
  }
  .navlinks.open{display:flex}
  .navlinks a{padding:12px 0; border-bottom:1px solid var(--hairline); font-size:15px}
  .menubtn{display:block}
  .cta-mini{display:none}
}

/* ---------- hero ---------- */
header.hero{
  position:relative; min-height:88vh; display:flex; align-items:center;
  padding:70px 0 60px; border-bottom:1px solid var(--hairline); overflow:hidden;
}
header.hero.short{min-height:52vh; padding:60px 0 50px}
.hero-canvas{position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none}
.hero-scrim{position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(100deg, rgba(5,8,16,.94) 34%, rgba(5,8,16,.55) 58%, rgba(5,8,16,.05) 85%)}
html[dir="rtl"] .hero-scrim{background:linear-gradient(-100deg, rgba(5,8,16,.94) 34%, rgba(5,8,16,.55) 58%, rgba(5,8,16,.05) 85%)}
@media(max-width:760px){
  .hero-scrim{background:radial-gradient(140% 80% at 50% 45%, rgba(5,8,16,.92) 48%, rgba(5,8,16,.45) 75%, rgba(5,8,16,0) 100%) !important}
  .hero-canvas{opacity:.65}
}
.hero .wrap{position:relative; z-index:2}
.hero .badge{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--label); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold-light); border:1px solid rgba(201,169,97,.4); border-radius:999px;
  padding:9px 18px; margin-bottom:28px; background:rgba(201,169,97,.06);
}
.hero .badge::before{content:""; width:6px; height:6px; border-radius:50%;
  background:var(--gold); box-shadow:0 0 10px var(--gold)}
.hero .creds{font-family:var(--display); font-style:italic; font-size:clamp(17px,2.4vw,22px); color:var(--steel); margin:2px 0 26px}
.hero .lede{font-size:clamp(18px,2.3vw,22px); max-width:620px}
.hero .lede strong{font-weight:600}
html[dir="rtl"] .hero .lede{max-width:660px}

/* ---------- buttons ---------- */
.btns{display:flex; flex-wrap:wrap; gap:14px; margin-top:28px}
.btn{
  font-family:var(--label); font-size:14px; letter-spacing:.03em;
  padding:14px 26px; border:1px solid var(--ivory); border-radius:2px;
  transition:.18s; display:inline-flex; align-items:center; gap:10px;
}
.btn.primary{
  background:var(--gold); border-color:var(--gold); color:var(--navy-deep); font-weight:600;
  box-shadow:0 0 26px rgba(201,169,97,.28);
}
.btn.primary:hover{background:var(--gold-light); border-color:var(--gold-light);
  box-shadow:0 0 40px rgba(201,169,97,.5); transform:translateY(-1px)}
.btn.ghost:hover{background:var(--ivory); color:var(--navy)}
.btn .arrow{transition:transform .18s}
.btn:hover .arrow{transform:translateX(3px)}
html[dir="rtl"] .btn:hover .arrow{transform:translateX(-3px)}

/* ---------- stat strip ---------- */
.metastrip{
  display:grid; grid-template-columns:repeat(4,1fr); gap:24px;
  margin-top:52px; padding-top:30px; border-top:1px solid var(--hairline); max-width:720px;
}
.metastrip .k{font-family:var(--label); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--steel); margin-top:6px}
.metastrip .v{font-family:var(--display); font-size:clamp(22px,3vw,32px); color:var(--gold-light); line-height:1}
@media(max-width:680px){.metastrip{grid-template-columns:repeat(2,1fr); gap:22px}}

/* ---------- sections ---------- */
section{padding:88px 0; border-bottom:1px solid var(--hairline); position:relative}
section.tinted{background:rgba(14,20,36,.5); backdrop-filter:blur(2px)}
.sechead{text-align:center; max-width:720px; margin:0 auto 48px}
.sechead .eyebrow{margin-bottom:16px; display:block}
.sechead p{color:var(--steel); font-size:19px}

/* ---------- cards ---------- */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.cards.four{grid-template-columns:repeat(4,1fr)}
.cards.two{grid-template-columns:repeat(2,1fr)}
@media(max-width:920px){.cards,.cards.four{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.cards,.cards.four,.cards.two{grid-template-columns:1fr}}
.card{
  background:rgba(14,20,36,.55); border:1px solid var(--hairline); border-radius:6px;
  padding:30px 26px; position:relative; overflow:hidden;
  transition:transform .25s, border-color .25s, box-shadow .25s;
}
.card:hover{transform:translateY(-4px); border-color:rgba(201,169,97,.55);
  box-shadow:0 12px 40px rgba(0,0,0,.35), 0 0 24px rgba(201,169,97,.08)}
.card .chip{
  width:52px; height:52px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(140deg, rgba(201,169,97,.9), rgba(201,169,97,.45));
  color:var(--navy-deep); font-size:22px; margin-bottom:20px;
  box-shadow:0 0 24px rgba(201,169,97,.3);
  font-family:var(--display);
}
.card h3{margin-bottom:8px}
.card .q{font-style:italic; color:var(--gold-light); font-size:16px; margin-bottom:12px; font-family:var(--display)}
.card p, .card li{font-size:15.5px; line-height:1.6; color:var(--steel)}
.card ul{margin:14px 0 0; padding:0; list-style:none}
.card li{padding:6px 0; border-top:1px solid var(--hairline)}
.card li::before{content:"— "; color:var(--gold)}
html[dir="rtl"] .card li::before{content:"— "}
.card .more{
  display:inline-flex; align-items:center; gap:8px; margin-top:18px;
  font-family:var(--label); font-size:13px; color:var(--gold-light); letter-spacing:.03em;
}
.card .num{
  position:absolute; top:22px; inset-inline-end:24px;
  font-family:var(--display); font-size:20px; color:var(--gold);
  width:40px; height:40px; border:1px dashed rgba(201,169,97,.5); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.card.featured{border-color:rgba(201,169,97,.5);
  background:linear-gradient(180deg, rgba(201,169,97,.08), rgba(14,20,36,.55) 40%)}

/* ---------- entries (career/publications) ---------- */
.entry{padding:26px 0; border-top:1px solid var(--hairline)}
.entry:first-of-type{border-top:none}
.entry .role{font-family:var(--display); font-size:21px}
.entry .org{font-family:var(--label); font-size:13px; letter-spacing:.04em; color:var(--gold); margin:4px 0 2px}
.entry .when{font-family:var(--label); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--steel)}
.entry p{margin:.7em 0 0; font-size:16.5px; line-height:1.6}
.tags{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px}
.tag{font-family:var(--label); font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--steel); border:1px solid var(--hairline); border-radius:999px; padding:4px 11px}

/* ---------- stats grid ---------- */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:26px; margin:38px 0 8px}
.stats.two{grid-template-columns:repeat(2,1fr); gap:30px}
.stat .n{font-family:var(--display); font-size:clamp(30px,4vw,40px); color:var(--gold-light); line-height:1}
.stat .l{font-family:var(--label); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--steel); margin-top:8px}
@media(max-width:680px){.stats{grid-template-columns:repeat(2,1fr); gap:24px}}

/* ---------- ladder table ---------- */
table.ladder{width:100%; border-collapse:collapse; margin:30px 0 6px; font-size:15px}
table.ladder th, table.ladder td{text-align:start; padding:12px 10px; border-bottom:1px solid var(--hairline); vertical-align:top}
table.ladder th{font-family:var(--label); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--steel); font-weight:600}
table.ladder td.lv{font-family:var(--display); font-size:19px; color:var(--gold-light); white-space:nowrap}
table.ladder td .nm{font-family:var(--display); font-size:16px}
table.ladder tr.hot td{background:rgba(201,169,97,.05)}
@media(max-width:680px){
  table.ladder,table.ladder tbody,table.ladder tr,table.ladder td{display:block}
  table.ladder thead{display:none}
  table.ladder td{border:none; padding:2px 0}
  table.ladder tr{border-bottom:1px solid var(--hairline); padding:14px 0; display:block}
}

/* ---------- trust band ---------- */
.trustband{display:flex; flex-wrap:wrap; justify-content:center; gap:14px; margin-top:38px}
.badge-pill{
  font-family:var(--label); font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--gold-light); border:1px solid rgba(201,169,97,.35); border-radius:999px;
  padding:9px 20px; background:rgba(201,169,97,.05);
}

/* ---------- CTA band ---------- */
.ctaband{text-align:center; padding:100px 0; border-bottom:none; position:relative; overflow:hidden}
.ctaband h2{font-size:clamp(32px,5.5vw,52px)}
.ctaband p{color:var(--steel); max-width:560px; margin:0 auto 8px}
.ctaband .btns{justify-content:center}
.ctaband .glow{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:640px; height:640px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(201,169,97,.14) 0%, rgba(201,169,97,.05) 40%, transparent 70%);
}

/* ---------- arc (Deploy→Train→Sustain connector) ---------- */
.arcline{
  display:flex; align-items:center; justify-content:center; gap:14px;
  font-family:var(--label); font-size:13px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold-light); margin:34px 0 6px; flex-wrap:wrap;
}
.arcline .sep{color:var(--steel)}

/* ---------- contact ---------- */
.contactgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:38px}
.contactgrid .k{font-family:var(--label); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--steel); margin-bottom:6px}
.contactgrid .v{font-family:var(--display); font-size:17px}
@media(max-width:680px){.contactgrid{grid-template-columns:repeat(2,1fr)}}

/* ---------- footer ---------- */
footer{padding:46px 0 64px; font-family:var(--label); font-size:13px; color:var(--steel);
  position:relative; z-index:2; background:var(--navy-deep); border-top:1px solid var(--hairline)}
footer .cols{max-width:var(--maxw); margin:0 auto; padding:0 28px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:22px}
footer a:hover{color:var(--gold)}
footer .links{display:flex; gap:18px; flex-wrap:wrap}

/* ---------- scroll reveal ---------- */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s ease}
.reveal.visible{opacity:1; transform:none}
.reveal.d1{transition-delay:.08s}
.reveal.d2{transition-delay:.16s}
.reveal.d3{transition-delay:.24s}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1; transform:none; transition:none}
  .btn.primary:hover{transform:none}
}

/* ---------- Arabic / RTL ---------- */
html[lang="ar"] body{font-family:var(--ar-serif); font-size:19px}
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3,
html[lang="ar"] .hero .creds,html[lang="ar"] .card .q{font-family:var(--ar-serif); letter-spacing:0}
html[lang="ar"] .eyebrow,html[lang="ar"] .navlinks,html[lang="ar"] .btn,
html[lang="ar"] .tag,html[lang="ar"] .badge-pill,html[lang="ar"] .metastrip .k,
html[lang="ar"] .stat .l,html[lang="ar"] .arcline,html[lang="ar"] .hero .badge{
  font-family:var(--ar-serif); letter-spacing:0; text-transform:none; font-size:14px;
}
html[lang="ar"] .brand .name{letter-spacing:.16em} /* wordmark stays Latin */
html[dir="rtl"] .arrow,
html[dir="rtl"] .arcline .sep{display:inline-block; transform:scaleX(-1)}
html[dir="rtl"] .btn:hover .arrow{transform:scaleX(-1) translateX(3px)}