:root{
  --ink:#0A0B0D;
  --panel:#101216;
  --line:#1E2228;
  --line2:#2A2F37;
  --text:#E8EAED;
  --muted:#8B929C;
  --dim:#5C636D;
  --accent:#7EA6FF;

  --sans:"Inter Tight","Vazirmatn",system-ui,-apple-system,sans-serif;
  --fa:"Vazirmatn",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;

  --pad:clamp(22px,6vw,36px);
  --maxw:660px;
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--ink);color:var(--text);
  font-family:var(--sans);font-size:15.5px;line-height:1.7;letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
  padding-bottom:var(--safe-b);
}
html[dir="rtl"] body{font-family:var(--fa);font-weight:300;line-height:2;letter-spacing:0}
::selection{background:var(--accent);color:var(--ink)}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.mono{font-family:var(--mono);letter-spacing:.08em}
.skip{position:absolute;inset-inline-start:-9999px}
.skip:focus{inset-inline-start:12px;top:12px;background:var(--panel);padding:8px 12px;z-index:99}

/* ---------- header ---------- */
.bar{
  position:sticky;top:0;z-index:40;padding-top:var(--safe-t);
  background:rgba(10,11,13,.86);backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line);
}
.barrow{display:flex;align-items:center;gap:14px;padding-block:12px}
.mark{font-size:12px;color:var(--text);text-decoration:none;flex:none}
.nav{display:flex;gap:16px;overflow-x:auto;scrollbar-width:none;flex:1;min-width:0}
.nav::-webkit-scrollbar{display:none}
.nav a{
  font-size:13.5px;color:var(--dim);text-decoration:none;white-space:nowrap;
  padding-block:3px;border-bottom:1px solid transparent;transition:color .18s,border-color .18s;
}
.nav a:hover{color:var(--muted)}
.nav a[aria-current="page"]{color:var(--text);border-bottom-color:var(--accent)}
.barend{display:flex;align-items:center;gap:6px;flex:none}
.ghost{
  font-size:11px;padding:6px 10px;border:1px solid var(--line2);border-radius:7px;
  background:transparent;color:var(--muted);text-decoration:none;cursor:pointer;transition:.18s;
}
.ghost:hover{border-color:var(--dim);color:var(--text)}
#install{color:var(--accent)}

/* ---------- hero ---------- */
.hero{padding-block:clamp(44px,11vw,76px) 0}
.status{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--muted);text-transform:uppercase;margin-bottom:24px}
.dot{width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none}
.bigname{font-size:clamp(2rem,7.5vw,2.7rem);font-weight:600;letter-spacing:-.035em;line-height:1.08;margin-bottom:10px}
html[dir="rtl"] .bigname{font-weight:600;letter-spacing:0;line-height:1.4}
.rolebig{font-size:1.05rem;color:var(--text)}
.role2{font-size:.95rem;color:var(--dim);margin-bottom:20px}
.lede{color:var(--muted);max-width:38em}

/* ---------- buttons ---------- */
.actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:12px 18px;border:1px solid var(--line2);border-radius:10px;
  background:var(--panel);color:var(--text);text-decoration:none;
  font-size:14px;font-weight:500;transition:border-color .18s,background .18s;
}
.btn:hover{border-color:var(--dim)}
.btn.primary{background:var(--text);color:var(--ink);border-color:var(--text);font-weight:600}
.btn.primary:hover{background:#fff}
@media (max-width:400px){.actions{display:grid;grid-template-columns:1fr 1fr}.btn.primary{grid-column:1/-1}}

/* ---------- facts: stated once, never repeated ---------- */
.facts{display:flex;gap:28px;flex-wrap:wrap;padding-block:34px;margin-top:34px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.fact{display:flex;flex-direction:column}
.fact-n{font-size:1.5rem;font-weight:600;letter-spacing:-.02em}
.fact-l{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
html[dir="rtl"] .fact-l{font-family:var(--fa);letter-spacing:0;text-transform:none;font-size:12px}

/* ---------- generic blocks ---------- */
.block{padding-block:clamp(32px,8vw,48px)}
.eyebrow{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin-bottom:18px}
html[dir="rtl"] .eyebrow{font-family:var(--fa);letter-spacing:0;text-transform:none;font-size:12.5px}
.prose p{color:var(--muted)}
.prose p+p{margin-top:14px}

.pagehead{padding-block:clamp(40px,10vw,64px) 8px}
.pagehead h1{font-size:clamp(1.7rem,6vw,2.2rem);font-weight:600;letter-spacing:-.03em;margin-bottom:10px}
html[dir="rtl"] .pagehead h1{letter-spacing:0}

/* ---------- logo chips: the only colour on the page, and only on hover ---------- */
.logo{
  width:34px;height:34px;border-radius:9px;flex:none;object-fit:cover;
  border:1px solid var(--line2);
  filter:grayscale(1) contrast(.85) brightness(.95);
  opacity:.7;transition:filter .25s,opacity .25s;
}
.entry:hover .logo,.orgchip:hover .logo{filter:none;opacity:1}

/* ---------- experience / venture entries ---------- */
.entry{padding-block:30px;border-top:1px solid var(--line)}
.entry:last-child{border-bottom:1px solid var(--line)}
.entry-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.entry-id{min-width:0}
.entry-id h2{font-size:1.05rem;font-weight:600;letter-spacing:-.015em;line-height:1.3}
html[dir="rtl"] .entry-id h2{letter-spacing:0}
.tag{font-size:12.5px;color:var(--dim);line-height:1.5}
.when{font-size:11px;color:var(--dim);margin-inline-start:auto;white-space:nowrap;align-self:flex-start;padding-top:3px}
html[dir="rtl"] .when{direction:ltr}
.rolename{font-size:.95rem;color:var(--accent);margin-bottom:10px}
.badge{
  font-size:10px;color:var(--muted);border:1px solid var(--line2);
  border-radius:5px;padding:2px 7px;margin-inline-start:6px;white-space:nowrap;
}
.desc{color:var(--muted);margin-bottom:14px}
.points{list-style:none;display:flex;flex-direction:column;gap:9px}
.points li{
  position:relative;padding-inline-start:16px;font-size:.92rem;color:var(--muted);line-height:1.65;
}
.points li::before{
  content:"";position:absolute;inset-inline-start:0;top:.72em;
  width:5px;height:1px;background:var(--line2);
}
.note{margin-top:14px;font-size:11px;color:var(--dim)}

@media (max-width:430px){
  .entry-head{flex-wrap:wrap}
  .when{margin-inline-start:0;width:100%;padding-top:0}
}

/* ---------- org strip on home ---------- */
.orgstrip{display:flex;flex-wrap:wrap;gap:8px}
.orgchip{
  display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  border:1px solid var(--line);border-radius:11px;padding:8px 13px 8px 8px;
  background:var(--panel);transition:border-color .18s;
}
html[dir="rtl"] .orgchip{padding:8px 8px 8px 13px}
.orgchip:hover{border-color:var(--line2)}
.orgchip span{font-size:13px;color:var(--muted)}
.orgchip .logo{width:26px;height:26px;border-radius:7px}

/* ---------- skills ---------- */
.group{padding-block:24px;border-top:1px solid var(--line)}
.group:last-of-type{border-bottom:1px solid var(--line)}
.grouptitle{font-size:.95rem;font-weight:500;color:var(--text);margin-bottom:14px}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{border:1px solid var(--line);border-radius:7px;padding:6px 12px;font-size:12.5px;color:var(--muted)}

.edu{display:flex;flex-direction:column;gap:2px;border-inline-start:2px solid var(--line2);padding-inline-start:16px}
.edu strong{font-weight:500}
.edu span{font-size:13px;color:var(--muted)}
.edu span.mono{font-size:11px;color:var(--dim)}

/* ---------- contact rows ---------- */
.row{display:flex;gap:16px;align-items:baseline;padding-block:16px;border-top:1px solid var(--line)}
.row:last-of-type{border-bottom:1px solid var(--line)}
.rowlabel{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);width:88px;flex:none}
html[dir="rtl"] .rowlabel{font-family:var(--fa);letter-spacing:0;text-transform:none;font-size:12.5px}
.rowval{color:var(--text);text-decoration:none;font-size:.95rem;word-break:break-word}
.rowval:hover{color:var(--accent)}

footer{border-top:1px solid var(--line);margin-top:40px;padding-block:28px 44px}
footer p{font-size:10.5px;color:var(--dim)}

/* ---------- motion ---------- */
main>section{opacity:0;transform:translateY(8px);animation:in .5s ease forwards}
main>section:nth-child(2){animation-delay:.05s}
main>section:nth-child(3){animation-delay:.1s}
main>section:nth-child(4){animation-delay:.15s}
@keyframes in{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  main>section{opacity:1;transform:none;animation:none}
  *{transition:none!important}
}

/* ================= additions ================= */

/* profile photo — removes itself if assets/photo.jpg isn't there */
.heroid{display:flex;align-items:center;gap:16px;margin-bottom:16px}
.heroid-txt{min-width:0}
.photo{
  width:72px;height:72px;border-radius:50%;object-fit:cover;flex:none;
  border:1px solid var(--line2);
  /* full colour — a face should read as a face */
  box-shadow:0 0 0 3px rgba(126,166,255,.10);
  transition:box-shadow .3s;
}
.heroid:hover .photo{box-shadow:0 0 0 4px rgba(126,166,255,.22)}
@media (max-width:400px){.photo{width:58px;height:58px}}

/* inline "read more" link */
.inline-link{
  display:inline-block;margin-top:16px;font-size:13.5px;color:var(--accent);
  text-decoration:none;border-bottom:1px solid transparent;transition:border-color .18s;
}
.inline-link:hover{border-bottom-color:var(--accent)}

/* ---------- case study ---------- */
.caseid{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.caseid h1{font-size:clamp(1.7rem,6vw,2.2rem);font-weight:600;letter-spacing:-.03em}
html[dir="rtl"] .caseid h1{letter-spacing:0}
.casesub{margin-bottom:14px}
.caseblock{padding-block:clamp(28px,7vw,40px);border-top:1px solid var(--line)}
.casenum{font-size:11px;color:var(--dim);margin-bottom:10px}
.caseh{font-size:1.15rem;font-weight:600;letter-spacing:-.02em;margin-bottom:12px}
html[dir="rtl"] .caseh{letter-spacing:0}
.statusblock{border-top:1px solid var(--line)}
.cta{border-inline-start:2px solid var(--accent);padding-inline-start:16px;margin-bottom:30px}
.cta p{color:var(--text)}

/* phone numbers are assembled in JS, so scrapers get nothing from the HTML */
.phone{cursor:pointer;color:var(--accent)}
.phone .revealtxt{font-size:11px;letter-spacing:.14em;text-transform:uppercase}
html[dir="rtl"] .phone .revealtxt{font-family:var(--fa);letter-spacing:0;text-transform:none;font-size:12px}
.phone.shown{color:var(--text);direction:ltr;display:inline-block}

/* ---------- print: the site becomes the résumé ---------- */
@media print{
  @page{margin:14mm}
  .bar,footer,.actions,.skip,.orgstrip,.previewnote,.inline-link,.note{display:none!important}
  html,body{background:#fff!important;color:#111!important;font-size:10.5pt;line-height:1.5}
  .wrap{max-width:100%;padding:0}
  main>section{opacity:1!important;transform:none!important;animation:none!important}
  section,.entry,.group,.row,.caseblock{page-break-inside:avoid;padding-block:10px}
  h1,.bigname{font-size:20pt;color:#000!important}
  h2,.caseh,.grouptitle{font-size:12pt;color:#000!important}
  .eyebrow,.casenum,.rowlabel,.fact-l,.when{color:#555!important}
  .lede,.desc,.prose p,.points li,.tag,.role2{color:#333!important}
  .rolename{color:#000!important;font-weight:600}
  .logo{filter:grayscale(1)!important;opacity:1!important;border-color:#ccc!important}
  .chip,.btn{border-color:#ccc!important;color:#333!important}
  .entry,.group,.row,.facts,.caseblock{border-color:#ddd!important}
  .cta{border-color:#999!important}
  a{color:#000!important;text-decoration:none}
  .phone.shown{color:#000!important}
}

/* ================= animated background =================
   Two slow-drifting glows plus a faint grid. Everything is
   fixed, behind the content, and animates transform only, so
   it costs almost nothing and never triggers layout. */

.bgfx{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  overflow:hidden;background:var(--ink);
}
.bgfx span{
  position:absolute;display:block;border-radius:50%;
  filter:blur(70px);opacity:.5;will-change:transform;
}
.bgfx .g1{
  width:60vmax;height:60vmax;top:-28vmax;left:-14vmax;
  background:radial-gradient(circle,rgba(126,166,255,.16),transparent 66%);
  animation:drift1 34s ease-in-out infinite alternate;
}
.bgfx .g2{
  width:48vmax;height:48vmax;top:34vmax;right:-20vmax;
  background:radial-gradient(circle,rgba(126,166,255,.09),transparent 68%);
  animation:drift2 46s ease-in-out infinite alternate;
}
.bgfx .g3{
  width:40vmax;height:40vmax;bottom:-22vmax;left:26vmax;
  background:radial-gradient(circle,rgba(160,150,220,.07),transparent 70%);
  animation:drift3 58s ease-in-out infinite alternate;
}
/* graph-paper grid, barely there — it drifts a single cell and loops */
.bgfx .grid{
  position:absolute;inset:-60px;border-radius:0;filter:none;opacity:1;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:60px 60px;
  animation:gridshift 24s linear infinite;
  -webkit-mask-image:radial-gradient(ellipse 90% 60% at 50% 0%,#000 15%,transparent 75%);
          mask-image:radial-gradient(ellipse 90% 60% at 50% 0%,#000 15%,transparent 75%);
}

@keyframes drift1{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(9vmax,7vmax,0) scale(1.14)}
}
@keyframes drift2{
  from{transform:translate3d(0,0,0) scale(1.08)}
  to{transform:translate3d(-11vmax,-6vmax,0) scale(1)}
}
@keyframes drift3{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(7vmax,-9vmax,0) scale(1.2)}
}
@keyframes gridshift{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(60px,60px,0)}
}

/* the sticky header sits on a moving backdrop, so it needs its own tint */
.bar{background:rgba(10,11,13,.72)}

@media (prefers-reduced-motion:reduce){
  .bgfx span{animation:none!important}
}
@media print{
  .bgfx{display:none!important}
}

/* ---------- email chooser ----------
   mailto: silently does nothing on machines with no mail client set up,
   which is most of them. So the button opens a small chooser instead. */
.mailwrap{position:relative;display:inline-flex}
.mailpop{
  position:absolute;top:calc(100% + 8px);inset-inline-start:0;z-index:25;
  min-width:250px;padding:6px;border:1px solid var(--line2);border-radius:12px;
  background:#12151A;box-shadow:0 14px 40px rgba(0,0,0,.55);
  display:none;flex-direction:column;gap:2px;
}
.mailpop.open{display:flex}
.mailpop a,.mailpop button{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 12px;border:0;border-radius:8px;background:transparent;
  color:var(--text);font-family:var(--sans);font-size:13.5px;text-align:start;
  text-decoration:none;cursor:pointer;width:100%;transition:background .15s;
}
html[dir="rtl"] .mailpop a,html[dir="rtl"] .mailpop button{font-family:var(--fa)}
.mailpop a:hover,.mailpop button:hover{background:rgba(255,255,255,.05)}
.mailpop .addr{
  font-family:var(--mono);font-size:11px;color:var(--dim);
  padding:8px 12px 6px;border-top:1px solid var(--line);margin-top:4px;
  direction:ltr;text-align:start;word-break:break-all;
}
.mailpop .hint{font-family:var(--mono);font-size:10px;color:var(--dim)}
@media (max-width:430px){.mailpop{min-width:min(78vw,260px)}}

/* ---------- film grain ----------
   One inline SVG turbulence tile, no network request, no image file. */
.grain{
  position:fixed;inset:0;z-index:50;pointer-events:none;
  opacity:.045;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:140px 140px;
}

/* ---------- staggered masked reveal ----------
   Each line sits inside its own overflow box and slides up from behind it.
   Delay comes from --d so the order is set in the markup, not here. */
.rv{overflow:hidden;display:block}
.rv > span{
  display:block;
  transform:translateY(115%);
  animation:rvup .64s cubic-bezier(.22,1,.36,1) forwards;
  animation-delay:var(--d,0ms);
}
/* headings have descenders — give the mask room so g and y aren't clipped */
.rv.bigname{padding-bottom:.09em;margin-bottom:calc(10px - .09em)}
.rv.lede{padding-bottom:.14em}

.rvf{
  opacity:0;transform:translateY(10px);
  animation:rvfade .6s cubic-bezier(.22,1,.36,1) forwards;
  animation-delay:var(--d,0ms);
}
.rvp{
  opacity:0;transform:scale(.94);
  animation:rvpop .7s cubic-bezier(.22,1,.36,1) forwards;
}

@keyframes rvup{to{transform:translateY(0)}}
@keyframes rvfade{to{opacity:1;transform:none}}
@keyframes rvpop{to{opacity:1;transform:none}}

/* the hero must not fade as a block, or the stagger is invisible underneath it */
.hero{opacity:1!important;transform:none!important;animation:none!important}

@media (prefers-reduced-motion:reduce){
  .rv > span,.rvf,.rvp{animation:none!important;opacity:1!important;transform:none!important}
}
@media print{.grain{display:none!important}}

/* ---------- share button ---------- */
.sharewrap{position:relative;display:inline-flex}
.sharepop{position:absolute;top:calc(100% + 8px);inset-inline-start:0;z-index:25;min-width:230px;padding:6px;border:1px solid var(--line2);border-radius:12px;background:#12151A;box-shadow:0 14px 40px rgba(0,0,0,.55);display:none;flex-direction:column;gap:2px}
.sharepop.open{display:flex}
.sharepop a,.sharepop button{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border:0;border-radius:8px;background:transparent;color:var(--text);font-family:var(--sans);font-size:13.5px;text-align:start;text-decoration:none;cursor:pointer;width:100%;transition:background .15s}
html[dir="rtl"] .sharepop a,html[dir="rtl"] .sharepop button{font-family:var(--fa)}
.sharepop a:hover,.sharepop button:hover{background:rgba(255,255,255,.05)}
.sharepop .hint{font-family:var(--mono);font-size:10px;color:var(--dim)}
@media (max-width:430px){.sharepop{min-width:min(74vw,240px)}}